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图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 病 ， 您 可 以 在 任意 设备 上 ， i 
己 豆 欢 的 浏览 器 和 PDF 阅 读 器 进 
阅读 。 


但 您 购买 的 电子 书 仅 供 您 个 人 使 
用 ,未 经 授权 ， 不 得 进行 传播 。 
我 们 愿意 相信 读者 具有 这 样 的 民 知 
和 觉悟 ， 与 我 们 共同 保护 知识 产 
权 。 


如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 尸 实 施 包 括 但 不 限于 关闭 该 
帐号 等 维权 措施 ， 并 可 能 退 究 法 律 
贡 任 。 








Bear Bibeault 

著名 Web 技 术 专 家 ， 有 30 多 年 编程 经 验 ， 也 是 技术 社 
区 JavaRanch 的 核心 人 物 之 一 。 除 本 书 外 ， 他 还 和 其 他 
世界 级 Web 专 家 联 祷 打造 了 巨著 《Ajax 实战 : 实例 详 
解 》 和 《Ajax 实战 : Prototype 与 Scriptaculous 篇 》 
( 均 由 人 民 邮 电 出 版 社 出 版 ) 。 





Yehuda Katz 
著名 Web 技 术 专 家 ，jQuery 开 发 团队 的 核心 成 员 ， 
Merb 等 开源 项 目的 贡献 者 。 他 还 维护 着 热门 网 站 


VisualjiQuery.com。 





三 生 石 上 
毕业 于 中 国 科学 技术 大 学 ， 曾 在 思科 网 迅 任 前 端 高 级 工 
程 师 ， 著 名 开源 框架 ExtAspNet 创 始 人 。 
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内 容 提 要 
jQuery 是 目前 最 受 欢迎 的 JavaScript/Ajax 库 之 一 ， 能 用 最 少 的 代码 实现 最 多 的 功能 。 本 书 全 面 介绍 
jQuery 知识 ， 展 示 如 何 遍 历 HTML 文档 、 处 理事 件 、 执 行动 画 、 给 网 页 添加 Ajax 以 及 jQuery UI 。 书 中 
芭 芭 地 围 终 “ 用 实际 的 示例 来 解释 每 一 个 新 概念 ”这 一 宗旨 ， 生 动 摘 述 了 jQuery 如 何 与 其 他 工具 和 框架 交 
互 以 及 如 何 生 成 jQuery 插件 。 
本 书 适合 各 层次 Web 开发 人 员 。 
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版 权 声 明 


Original English language edition, entitled jQuery in Action Second Edition by Bear Bibeault, 
Yehuda Katz, published by Manning Publications. 178 South Hill Drive, Westampton, NJ 08060 USA. 
Copyright © 2010 by Manning Publications Co. 


Simplified Chinese-language edition copyright © 2012 by Posts & Telecom Press. All rights 
reserved. 





本 书 中 文 简体 字 版 由 Manning Publications Co. 授权 人 民 邮 电 出 版 社 独家 出 版 。 未 经 出 版 者 书 
面 许可 ， 不 得 以 任何 方式 复制 或 抄 袜 本 书 内 容 。 
版 权 所 有 ， 侵 权 必 究 。 
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对 第 1 版 的 赞 和 





这 是 一 本 杰出 的 著作 ， 是 Manning 出 版 社 “In Action” 系 列 的 成 功 延 续 。 它 浅显 易 民 有 旦 示例 
军 。 实 验 室 页 面 是 探索 jQuery 库 的 绝 佳 方式 ， 它 应 该 成 为 所 有 Web 开 发 者 工具 箱 中 的 重要 组 成 
部 分 。 给 予 五 星 评价 ! 




















David Sills, JavaLobby, Dzone.com 








此 书 既 可 以 作为 初学 jQuery 时 的 基础 教材 ， 也 可 以 作为 精通 jQuery 之 后 的 参考 手册 。 
David Hayden， 微 软 MVP C#，Codebetter.com 








对 于 jQuery 的 新 手 来 说 ， 此 书 是 很 好 的 初级 谈 本 ， 它 包含 了 很 多 框架 的 笛 见 用 法 ……' 示 例 贯 
穿 全 书 并 相互 关联 ， 使 论述 更 有 条 理 。 代 码 片 段 很 明显 ， 文 学 清晰 易 懂 。 


Grant Palin, Blogger.com 











感谢 本 书 的 作者 Bear Bibeault 和 YehudaKatz， 他 们 的 做 法 值得 效仿 。 你 可 以 采取 从 头 到 尾 的 
方式 学 习 这 本 综合 性 闭 作 ， 当 然 你 也 可 称 之 为 操作 手册 。 对 jQuery 已 经 有 一 定 涉 独 并 需要 最 佳 实 
践 验 证 的 开发 者 来 说 ， 此 书 也 是 很 棒 的 参考 手册 。 

Matthew McCulloush， 美 国 科 罗拉 州 丹佛 开 源 用 户 组 




















本 书 技 术 禾 拳 全 面 ， 示 例 代 码 使 用 广泛 ， 文 字 浅 显 易 懂 ， 对 任何 Web 开 发 者 来 说 都 是 非常 有 
价值 的 资料 , 能 帮助 他 们 最 大 限度 地 利用 JavaScript 的 强大 功能 , 是 所 有 对 学 习 jQuery 感 兴趣 的 人 
的 必 读 之 作 。 





Michael J. Ross, 
Slashdot 贡 献 者 ，Web 开 发 人 员 








我 强烈 推荐 此 书 , 无 论 新 手 还 是 高 级 开发 者 ， 只 要 想 次 入学 习 JavaScript、 编 写 最 好 最 优雅 的 
代码 ， 又 不 想 被 JavaScript 的 传统 编程 方式 所 困扰 ， 都 可 以 从 中 获 益 。 
Val 的 博客 











jQuery in Action 对 轿 露 涉 角 的 jQuery 库 ( 客户 问 JavaScript ) 进行 了 全 面 深 入 的 研究。 


一 www.DZone.com 
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一 切 为 了 简单。 当 Web 开 发 者 想 要 编写 儿 个 简单 交互 行为 的 时 候 ， 为 什么 非得 把 代码 写 得 宛 
长 、 复 好， 像 书 一 样 长 篇 大 论 呢 ? 复杂 性 从 来 就 不 是 Web 应 用 开发 的 必要 条 件 。 

在 着 手 创 建 jQuery 的 时 候 ， 我 就 决定 把 重点 放 在 小 巧 而 简单 的 代码 上 ， 它 们 要 服务 于 Web 
开发 者 日 常 处 理 的 实际 应 用 。 读 了 本 书 之 后 ,我 感到 很 高 兴 ， 因 为 本 书 出 色 地 体现 了 jQuery 库 
的 原则 。 

本 书 注重 以 人 简洁、 精炼 的 形式 展示 实用 的 代码 ， 对 于 想 熟 悉 该 库 的 人 来 说 , 它 是 理想 的 学 习 
资源 。 

Bear 和 Yehuda 对 该 库 内 部 工作 机 制 的 细节 给 予 了 极 大 的 关注 ， 这 是 本 书 最 让 我 满意 的 地 方 。 
他 们 不 遗 余 力 地 人 研究 和 推广 jQuery API， 我 几乎 每 天 都 能 收 到 来 自 他 们 的 电子 邮件 或 即时 消息 ， 
请 求解 释 、 报 告 新 发 现 的 程序 缺陷 以 及 对 库 的 改进 建议 。 因 此 请 放心 ， 摆 在 你 面前 的 这 本 关于 
jQuery 库 的 书 ， 是 经 过 作者 深思 丈 虑 并 深入 人 研究 后 完成 的 车 作 。 

本 书 还 清晰 地 阅 述 了 jQuery 插件 以 及 插件 开发 痛 后 的 融 上 略 和 理论 ， 这 也 让 我 感到 很 惊 言 。 插 
件 体 系 结构 的 运用 使 得 jQuery 非常 简单 。 这 个 体系 结构 提供 了 许多 有 文档 描述 的 扩展 点 ， 插 件 可 
以 基于 此 添加 扩展 功能 。 一 般 来 说 ,那些 功能 虽然 有 用 却 不 够 通用 ， 所 以 没有 被 纳入 jQuery 
因此 插件 体系 结构 十 分 必要 。 本 书 讨论 的 一 些 插件 ， 例 如 Forms (表单 )、Dimension (尺寸 ) 和 
LiveQuery( 实时 查询 ) 插件 ,已 被 广泛 采用 ， 其 原因 非常 明显 : 它们 的 创建 、 文 档 编写 和 维护 
都 是 专家 级 的 。 请 特别 关注 怎样 使 用 和 构建 插件 ， 因 为 插件 的 运用 是 jQuery 开发 的 基石 。 

有 如 此 优秀 的 资源 加 以 优 助 ,jQuery 项 目 一 定 会 继续 成 长 并 取得 更 大 的 成 功 。 在 你 探索 jQuery 
的 征途 中 ， 它 将 是 你 的 得 力 助 手 。 


















































John Reslg 
jQuery 的 创建 者 
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本 书 两 位 作者 ， 一 位 是 头发 已 经 斑 日 的 老手 ， 早 在 FORTRAN 成 行 的 年 代 他 就 专注 于 编程 ， 
而 男 一 位 是 狂热 的 领域 专家 ， 聪明 过 人 ,一旦 脱离 因特网 ， 他 就 会 对 外 面 的 世界 茫然 硅 失 。 背 景 
如 此 锭 异 ， 是 什么 促使 他 们 走 到 一 起 合作 项 目 呢 ? 

答案 很 明显 ，jQuery。 

一 个 非常 有 用 的 客户 问 工 具 使 我 们 开始 合作 ,但 两 人 的 经 历 却 叉 截 然 不 同 。 

我 (Bear ) 第 一 次 听 说 jQuery 是 在 写 4jax in Practice* 的 时 候 。 图 书 出 版 流程 的 后 期 是 暴风 台 
雨 般 的 编校 阶段 ,文字 编辑 审阅 全 文 以 确保 语法 正确 和 语句 清晰 ,技术 编辑 保证 技术 无 误 。 至少 
对 我 来 说 ， 这 是 写 书 过 程 中 压力 最 大 、 最 令 人 抓 狂 的 阶段 ,我 最 不 想 听 到 的 就 是 “你 真 应 该 增加 
一 廊 全 新 的 内 容 ”。 

我 在 4jax in Practice 中 的 一 草 论述 了 一 些 文 择 Ajax 的 客户 端 库 ， 我 对 其 中 一 个 库 〈Prototype ) 
相当 见 悉 ， 而 对 其 他 库 〈Dojo 工 具 箱 和 DWR ) 只 好 一 笔 市 过 。 

就 在 我 位于 应 付 众多 任务 的 时 候 (保住 工作 ， 发 展 副业 ， 处 理 家 庭 琐事 )， 技 术 编 辑 Valentin 
Crettaz 不 经 意 地 爆 出 了 一 句 :“ 你 为 什么 不 写 一 节 关 于 jQuery 的 内 容 ? ” 

“什么 ? ”我 问 。 

他 立即 发 表 长 篇 大 论 , 描述 了 这 个 全 新 的 库 是 如 何 奇妙 , 真 应 该 与 当前 文 持 Ajax 的 其 他 客户 
症 库 一 起 进行 评测 。 于 是 我 回 了 一 些 人 :;“ 有 没有 听 说 过 “jQwery” 库 ?” 

我 收 到 了 很 多 积极 回应 ， 这 些 回 应 都 很 热情 ， 一 人 致 认为 jQuery 非 第 出色。 在 一 个 细 雨 绢 强 的 
周 日 下 午 , 我 花 了 大 约 4 小 时 在 jQuery 网 站 阅读 文档 , 并 编写 小 测试 程序 , 摸索 jQuery 的 行事 方式 。 
然后 我 匆匆 写 出 一 市 新 的 内 容 ， 并 发 给 技术 编辑 看 看 是 否 达 到 要求 。 

这 广内 容 受 到 热情 赞扬 ,随后 我 们 继续 推进 并 最 终 完成 了 Ajax in Practice 一 书 的 编辑 工作 ( 关 
于 jQuery 的 这 厄 内 容 后 来 还 发 表 在 Dr Dobb3% Journal 的 网 站 上 )。 

当 人 尘埃 落 定 ， 对 jQuery 的 狂热 已 经 让 一 条 但 强 的 小 种 子 在 我 内 心 次 处 生根 发 村 。 我 很 喜欢 之 
前 在 匆忙 中 研究 jQuery 所 学 到 的 知识 ， 于 是 就 开始 进一步 学 习 。 我 开始 在 Web 项 目 中 使 用 jQuery。 
我 很 喜欢 我 看 到 的 效果 。 我 开始 奉 换 以 前 项 目 中 的 老 代 码 ， 看 如 何 使 用 jQuery 简化 页 面 。 我 变 得 
对 它 爱 不 释 手 。 

这 个 新 发 现 让 我 满腔 热情 并 想 与 他 人 分 享 ， 我 冲动 地 向 Manning 出 版 社 递交 了 出 版 本 书 的 提 
















































































J 中 文 版 《Ajax 实 成 : 实例 详解 人 民 邮 电 出 版 社 ，2008。 一 一 编者 注 
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以 。 显 然 ,， 我 那 时 一 定 很 有 说 服 力 。( 我 让 引起 这 一 切 麻 烦 的 技术 编辑 Valentin 继 续 做 本 书 的 技术 
编辑 ， 作 为 对 他 的 惩罚 。 我 打赌 这 对 他 来 说 是 深刻 的 教训 。 ) 
就 在 那 时 ， 编 辑 Mike Stephens 问 我 :“ 这 个 项 目 和 Yehuda Katz 合 作 ， 你 党 得 怎么 样 ? ” 
“Yehenta 是 谁 呀 ? ”我 问 道 。 


米 米 米 


Yehuda 参 与 这 个 项 目的 经 历 和 我 大 相 径 庭 。 早 在 jQuery 连 版 本 号 都 没有 的 时 候 ， 他 就 参与 进 
去 了 。 在 无 意 中 发 现 Selectable 插 件 之 后 ， 他 就 对 jQuery 核心 库 产 生 了 兴趣 。 他 对 于 (〈 那 时 ) 缺少 
在 线 文档 多 少 有 点 失望 , 于 是 开始 更 新 维基 网 页 , 并 且 建 立 了 Visual jQuery 网 站 (visualjjquery.com )。 
之 后 不 入 ， 他 牵头 完善 在 线 文档 ， 为 jQuery 做 贡献 ， 管 理 插件 体系 结构 和 生态 系统 ， 同 时 他 
还 癌 Ruby 社 区 推广 jQuery。 
然后 有 一 天 ,Manning 出 版 社 给 他 打 来 电话 〈 一 个 朋友 把 他 的 名 字 告 知 了 出 版 社 ), 问 他 是 否 
有 兴趣 和 一 个 名 叫 Bear 的 家 伙 人 合作， 出 一 本 关于 jQuery 的 书 ……: 


米 米 米 


虽然 我 们 的 背景 、 经 历 、 专 长 迎 异 ， 参 与 项 目的 方式 也 不 同 ， 但 并 不 妨碍 我 们 组 成 一 个 很 
棒 的 团队 ， 并 且 在 合作 的 过 程 中 收获 了 许多 快乐 。 即 便 是 地 理 上 的 差距 ( 我 在 德 元 院 斯 州 的 中 
心 ， 而 Yehuda 在 加 利 福 尼 亚 州 的 海边 )， 也 不 足以 形成 障碍 。 这 得 感谢 电子 邮件 和 即时 消息 带 来 
的 便利 ! 
把 我 们 的 知识 和 才华 凝聚 成 一 本 很 棒 旦 有 深度 的 好 书 , 这 正 是 我 们 所 期 望 的 。 希望 你 阅读 愉 
快 ， 恰 如 我 们 创作 时 那样 。 
但 同时 也 要 保持 清醒 的 头脑 。 
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ll 


且 


距 本 书 第 1 版 出 版 才 过 去 了 两 年 ， 有 必要 这 人 么 快 对 其 进行 更 新 吗 ? 

与 稳定 的 服务 器 端 语言 ( 例如 Java ) 相 比 ，Web 客 户 端 技术 的 更 新 要 快速 得 多 。jQuery 不 是 
东 拼 西 潍 的 技术 ， 而 是 走 在 趋势 最 前 沿 的 技术 | 

jQuery 团队 每 年 都 会 发 布 一 个 主要 的 新 版 本 ( 最 近 力 争 每 年 1 月 份 发 布 )。 除 此 之 外 ， 在 一 年 
之 中 还 会 有 一 些小 版 本 更 新 。 这 意味 看 目 本 书 第 1 版 出 版 以 来 ， 已 经 有 很 多 小 版 本 更 新 以 及 两 个 
基于 jQuery 1.2 的 主要 版 本 ， 也 就 是 jQuery 1.3 和 1.4 版 本 。” 

随 着 每 个 主要 版 本 的 发 布 ，jQuery 的 功能 都 得 到 了 极 大 扩展 和 增强 。 无 论 是 从 目 定 义 事件 ， 
事件 的 命名 空间 ， 子 数 和 特效 队列 ， 还 是 从 大 量 新 增 的 实用 方法 和 函数 来 看 ， 在 第 1 版 大 获 成 功 
之 后 ，jQuery 的 能 力 范 围 已 经 得 到 了 显 和 车 扩 大 。 

这 还 不 包括 jQuery UI! 早 在 两 年 前 的 初期 阶段 ， 本 书 的 第 1 版 只 用 了 其 中 一 草 的 几 刷 来 介绍 
jQuery UI。 从 那 以 后 ，jQuery UI 逐 淘 流 行 并 发 展 成 熟 ， 在 这 个 版 本 中 ，jQuery UI 已 是 重要 的 一 
部 分 ， 总 共有 3 章 。 

因此 第 2 版 的 发 行 顺 理 成 草 ， 它 包含 了 jQuery 和 jQuery UI 在 过 去 两 年 中 所 取得 的 发 展 成 采 。 


第 2 版 有 什么 新 的 内 容 ? 


当 我 们 决定 继续 编写 本 书 的 第 2 版 时 , 我 记得 有 人 曾 跟 我 说 过 ,“ 这 应 该 是 小 染 一 原 。 你 只 需 
要 对 第 1 版 进行 一 些 更 新 就 可 以 了 。 

他 们 完全 错 了 ! 事实 上 ,完成 第 2 版 所 花 的 时 间 比 编写 第 1 版 还 要 多 。 我们 不 想 挥 入 这 个 “ 理 
所 当然 ”的 陷阱 ， 仪 仅 在 菏 些 地 方 增加 一 些 更 新 就 万 事 大 吉 了 。 我 们 想 让 这 一 版 不 仅 是 第 1 版 的 















































比较 一 下 第 1 版 和 第 2 版 的 目录 就 可 以 知道 , 从 第 1 章 到 第 8 草 的 目录 结构 并 没有 太 大 变化 。 但 
这 也 是 两 个 版 本 仅 有 的 相似 之 处 了。 

第 2 版 不 是 对 第 1 版 的 简单 修补 。 文本 中 每 一 个 段 阔 ,示例 中 的 每 一 行 代码 ， 虱 经 过 了 仔细 的 
检验 。 书 中 不 仅 包 含 了 jQuery 1.2~1.4 版 本 新 增 和 修改 的 内 容 , 而 且 每 莉 的 内 容 和 示例 代码 也 已 更 























J 在 编辑 本 书 中 文 版 时 ，jQuery 目 前 的 最 新 版 本 为 1.7.1。 一 一 编者 注 
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新 ， 以 反映 当前 页 面 脚本 和 jQuery 用 法 的 最 佳 实践 。 总 之 ， 作 为 一 个 团队 ， 在 使 用 jQuery 编写 高 
度 交 互 的 页 面 脚本 方面 ， 我 们 又 拥有 了 夯 外 两 年 的 实践 经 验 。 

我 们 检查 了 所 有 示例 ， 更 新 了 一 些 示 例 以 便 更 好 地 展示 如 何在 实践 中 使 用 jQuery 1.4， 把 一 
些 示 例 蔡 换 成 更 适合 展示 讨论 内 容 概念 的 示例 。 例 如 , 第 1 版 的 该 者 可 能 还 记得 ， 第 4 草 结 尾 处 用 
来 展示 jQuery 事件 处 理 的 综合 示例 Bamboo Grille。 经 过 尝试 ， 我 们 还 是 没 能 重 构 此 示例 来 展示 最 
新 的 jQuery 事件 处 理 概 念 ， 比 如 “live” 和 目 定 义 事件 。 因 此 ， 我 们 用 示例 DVD Ambassador 人 代替 
了 这 个 示例 ， 后 者 能 更 好 地 演示 高 级 事件 处 理 概 念 。 

本 书 的 第 二 部 分 聚焦 jQuery UI[， 这 是 全 新 的 内 容 ， 全 面 窗 盖 了 目 第 1 版 出 版 以 来 jQuery UI 的 
更 新 。 

我 们 估算 了 一 下 , 将 本 书 第 一 部 分 新 增 、 蔡 换 和 更 新 的 内 容 , 以 及 全 新 的 第 二 部 分 计算 在 内 ， 
本 书 至 少 有 50% 是 全 新 的 内 容 。 余 下 的 50% 内 容 也 经 过 了 全 面 检查 以 确保 其 内 容 是 最 新 的 ， 能 反 
映 最 新 的 最 佳 实 践 。 

这 已 经 不 是 “小 菜 一 碟 ” 了 | 
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致谢 








影 结 束 时 银 硕 上 滚动 的 、 无 穷 无 尽 的 怪 谢 名 单 是 否 曾 让 你 感到 慰 讶 甚至 困惑 ? 真 的 需要 那 

么 多 人 去 制作 一 部 电影 吗 ? 

与 此 类 似 ， 可 能 很 多 人 会 为 需要 那么 多 人 参与 一 本 书 的 出 版 而 感到 惊讶 ， 但 事实 就 是 如 
此 。 才 华 横 汶 的 贡献 者 通力 合作 ， 最 终 成 采 就 是 你 手 上 拿 春 的 这 本 书 〈 或 是 你 在 屏 硕 上 阅读 
的 电子 书 六 

Manning 出 版 社 的 全 体 员 工 一 直 和 孜 和 孜 不 倦 地 和 我 们 一 起 工作 , 以 确保 本 书 达 到 预期 的 高 水 平 ， 
感谢 他 们 所 做 的 努力 。 没 有 人 他们， 就 没有 本 书 。 致 谢 名 单 不 仅 包 括 出 版 人 Marjan Bace、 编 辑 Mike 
Stephens， 也 包括 以 下 贡献 者 : Lianna Wlasiuk、Karen Tegtmayer、Andy Carroll、Deepak Vohra、 
Barbara Mirecki、 Megan Yockey、 Dottie Marsico 、Mary Piergies、Gabriel Dobrescu 和 Steven Hong。 

对 审 稳 人 我 们 更 是 感激 不 尽 ， 他们 帮忙 确定 本 书 的 最 终 形式 ， 从 发 现 体 单 的 打字 错误 ,到 更 
正 术 语 和 代码 错误 ,甚至 帮助 组 织 本 书 章 目 。 每 个 审 稿 环节 都 极 大 提升 了 最 终 产 品 的 质量 。 感 谢 
抽出 时 间 审 阅 本 书 的 各 位 朋友 : Tony Niemann、Scott Sauyet、Rich Freedman 、Philip Hallstrom、 
Michael Smolyak 、Marion Sturtevant、Jonas Bandi、Jay Blanchard、Nikander Bruggeman、Maregriet 




















Bruggeman、 Greg Donald、 Frank Wang、 Curtis Miller、 Christopher Haupt、 Cheryl Jerozal 、 Charles 
E. Logston、 Andrew Siemer、 Eric Raymond、 Christian Marquardt、Robby O’Connor、Marc Gravell、 
Andrew Grothe 、Anil Radhakrishna、Daniel Bretoi 和 Massimo Perga。 

特别 感谢 本 书 的 技术 编辑 Valtentin Crettaz。 他 除了 在 各 种 条 件 下 检查 每 段 示 例 代码 ,还 为 本 
书 做 出 了 宝 贯 的 贡献 ， 包 括 确保 文字 的 技术 正确 性 ， 碍 找 原 本 丢失 的 信息 ， 紧 跟 库 的 更 新 步伐 ， 
以 确保 本 书 中 使 用 的 是 最 新 和 最 准确 的 jQuery 和 jQuery UI， 甚 至 当 需 要 服务 需 端 代码 时 ， 他 还 提 
供 了 PHP 版 的 示例 。 











Bear Bibeault 





本 书 是 我 的 第 四 本 著作 ， 需 要 感谢 很 多 人 ， 再 次 感谢 javaranch.com 网 站 的 全 体会 员 和 职员 。 
如 采 起 初 我 没有 加 入 JavaRanch， 就 不 会 有 机 会 去 写 书 ， 因 此 诚 击 地 感谢 Paul Wheaton 和 Kathy 
Sierra， 是 他 们 局 动 了 整 件 事情 ， 同 时 感谢 给 予 我 玖 励 和 文 持 的 会 员 ， 包 括 〈 但 不 限于 ) Eric 
Pascarello 、Ben Souther 、Ernest Friedman Hill、 Mark Herschberg、Andrew Munkhouse 、Jeanne 
Boyarski 、Bert Bates 和 Max Habbibi。 
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2 致 谢 


感谢 Valentin Crettaz， 不 仅 因 为 他 是 一 位 出 色 的 技术 编辑 和 代码 贡献 者 (正如 上 面 所 说 的 )， 
还 因为 是 他 最 早 把 jQuery 介绍 给 我 。 

跟 往 常 一 样 ， 还 要 回 我 的 麦子 Jay、 狗 狗 Little Bear 和 Cozmo ( 它 的 照片 使 得 本 书 更 加 生动 ) 
致 以 衷心 的 感谢 。 他 们 忍受 了 我 像 个 影子 一 样 存 在 ,在 写 书 的 儿 个 月 时 间 里 , 我 们 虽然 生活 在 一 
起 ， 但 我 却 很 少 把 目光 从 MacBook Pro 的 键盘 上 移 开 ， 抬 头 看 上 他 们 一 眼 。 

好 后， 感谢 我 的 合作 者 Yehuda Katz， 没 有 他 就 不 可 能 有 这 个 项 目 ， 同 时 也 感谢 John Resig 和 
其 他 jQuery 和 jQuery UI 的 贡献 者 们 。 











Yehuda Katz 


首先 ， 感谢 我 的 合 著者 Bear Bibeault， 他 丰 军 的 写作 经 验 让 我 受益 匪 浅 。 他 拥有 天 才 的 写作 
技巧 ， 解 决 专业 出 版 物 中 疑难 问题 的 能 力 令 人 印象 深刻 ， 这 是 本 书 得 以 完成 的 极 大 保障 。 

说 到 本 书 的 完成 ， 我 必须 感谢 我 亲爱 的 妻子 Leah， 我 花 了 这 么 长 的 时 间 写 书 而 没有 陪伴 她 ， 
让 她 孤独 地 忍受 了 漫漫 长 夜 和 每 个 周末 ， 对 此 我 感到 很 愧 次 。 本 书 得 以 完 往 离 不 开 她 的 付出 ， 而 
且 ， 是 她 的 支持 使 我 走 过 了 本 项 目 最 艰难 的 阶段 。 我 爱 你 ，Leah。 

其 次 , 没有 jQuery 库 ， 就 没有 本 书 。 感 谢 jQuery 的 创建 者 John Resig， 他 改变 了 客户 端 开发 的 
面 狗 ,并 减轻 了 全 球 Web 开 发 者 的 工作 量 (不管 相信 与 否 ， 在 中 国 、 日 本 、 法 国 等 许多 国家 ,我 
们 都 拥有 相当 大 的 用 户 群 )。 我 把 他 当成 好 朋友 ， 在 我 完成 这 个 艰巨 任务 的 过 程 中 ， 这 位 才华 横 
淤 的 作者 对 我 帮助 其 多 。 

jQuery 的 面世 离 不 开 令 人 钦佩 的 社区 用 户 和 核心 团队 成 员 ， 包括 开发 组 的 Brandon Aaron 和 
J6rn Zaefferer， 推 广 组 的 Rey Bango 和 Karl Swedberg， 人 负责 jQuery UI ( 用户 界面 ) 的 Paul Bakaus， 
和 我 一 起 在 插件 组 工作 的 Klaus Hartt 和 Mike Alsup。 这 个 强大 的 程序 员 团 队 把 jQuery 框架 从 紧凑 、 
简单 的 核心 操作 基础 库 , 推进 为 世界 级 的 JavaScript 库 ， 几 乎 任何 需求 都 有 着 由 用 户 贡 献 的 (模块 
化 的 ) 文 持 。jQuery 的 贡献 者 太 多 了 ， 以 至 于 我 可 能 会 漏 拯 很 多 人 的 名 字 。 可 以 肯定 ， 如 有 果 没 有 
围绕 这 个 库 而 兴起 的 独一无二 的 社区 ， 我 就 不 会 写 这 本 书 ， 真 不 知道 该 如 何 感 谢 你 们 。 

最 后 ,我 想 感 谢 我 的 家 人 ,迁居 到 西海 尾 以 来 ,我 没 能 经 党 回去 看 望 家 人 。 兄 轨 姐 妹 间 的 手 
足 情谊 让 我 度 过 了 快乐 的 成 长 时 光 , 家 人 的 信任 使 我 坚信 能够 克服 任何 困难 。 妈妈、Nikki、Abie， 
还 有 Yaakov: 谢谢 你 们 ， 我 爱 你 们 。 
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天 于 本 书 


更 少 的 代码 ， 更 多 的 功能 。 

一 言 以 熙 之 , 本 书 的 目的 是 : 帮助 你 学 习 如 何在 网 页 中 以 更 少 的 脚本 来 实现 更 多 的 功能 。 本 
书 的 两 位 作者 ， 一 位 是 jQuery 的 狂热 用 户 ， 另 一 位 是 jQuery 页 献 者 和 布道 者 ， 都 坚信 jQuery 是 
目前 最 好 的 JavaScript 库 ， 可 以 帮助 你 实现 上 述 日 标 。 

本 书 致力 于 让 你 在 快速 高 效 地 运行 jQuery 的 同时 ,体验 到 写 代 码 的 乐趣 。 本 书 讨论 了 核心 
的 jQuery 库 和 配套 的 jQuery UI 库 的 所 有 API， 每 个 API 方 法 都 以 容易 理解 的 语法 块 呈现 ， 并 描 
述 了 方法 的 参数 和 返回 值 。 其 中 包含 了 很 多 高 效 使 用 API 的 例子 , 而 且 对 于 重要 概念 ,我 们 提供 
了 称 为 “实验 室 ” 的 页 面 来 详细 描述 。 通 过 这 些 全 面 而 有 趣 的 网 页 ， 你 可 以 在 实践 中 观察 jQuery 
方法 的 芯 妙 之 处 ， 而 无 需 手 工 编写 代码 。 

所 有 的 示例 代码 和 实验 室 页 面部 可 以 从 这 里 下 载 : http:/www.manning.coryjQueryin 
ActionSecondEdition 或 http://www.manning.com/bibeault2。 

我 们 可 以 用 一 堆 侣 销 的 行 话 来 告诉 你 本 书 有 多 人 么 棒 ， 但 是 你 并 不 想 当 费 时 间 来 听 这 些 ， 对 
吧 ? 你 想 要 的 是 获取 更 多 jQuery 的 知识 ， 好 吧 ， 这 正 是 本 书 的 意图 。 

闲话 少 竹 ， 请 你 继续 阅读 吧 ! 


渎 者 对 象 


本 书面 向 各 层次 的 Web 开 发 人 员 ,帮助 他 们 使 用 JavaScript 创 建 很 酯 的 交互 性 Web 应 用 程序 ， 
而 不 需要 从 头 写 那些 原始 的 、 依 赖 于 浏览 希 特 性 的 客户 交代 码 。 

所 有 和 硕 望 借助 jQuery 的 强大 功能 ， 创 建 高 交互 性 和 可 用 性 的 Web 应 用 程序 ， 以 取悦 客户 的 
开发 人 员 ， 午 可 以 从 中 受益 。 

可 能 Web 开发 新 手 会 发 现 一 些 革 市 有 点 深奥 , 但 并 不 妨碍 他 们 深入 学 习 。 我 们 在 附录 中 介绍 
了 JavaScript 的 基本 概念 ， 这 将 有 助 于 最 大 限度 地 发 挥 jQuery 的 潜能 。Web 开发 新 手 只 需 理解 一 
些 关 键 概 念 ,就 会 发 现 jQuery 是 很 容易 学 的 。 对 高 级 开发 人 员 而 言 , jQuery 则 是 一 个 强大 的 武 带 。 

无 论 Web 开发 的 新 手 还 旦 老将 ， 客 户 闯 的 程序 员 掌 握 jQuery 部 会 受益 菲 浅 。 我 们 确信 ， 本 
书 的 内 容 将 有 助 于 你 快速 掌握 这 门 知识 。 


章 世 概述 


本 书 的 组 织 形 式 立 足 于 帮助 你 以 最 高 效 的 方式 学 习 jQuery 和 jQuery UI 的 知识 。 它 从 jQuery 
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2 关于 本 书 


创建 时 所 采用 的 设计 理念 人 手 ， 快 速 过 渡 到 jQuery API 的 基本 概念 。 然 后 讲授 jQuery 各 方面 的 
知识 ， 从 事件 处 理 到 Ajax 请 求 ， 这 将 帮助 你 书写 规范 的 客户 问 代 码 。 除 此 之 外 ， 本 书 还 探讨 了 
配套 的 jQuery UI 库 。 

本 书 分 为 两 部 分 : 第 一 部 分 涵盖 了 核心 的 jQuery 库 ， 第 二 部 分 介绍 jQuery UI 库 。 第 一 部 分 
包含 8 章 。 

第 1 曹 我 们 将 了 解 jQuery 的 理念 ,以 及 它 是 怎么 遵循 现代 编码 原则 的 , 比如 不 唐 突 的 JavaScript。 
我 们 讨论 了 采用 jQuery 的 理由 ， 概 述 了 它 的 工作 原理 。 我 们 次 入 关键 概念 ， 比 如 文档 就 绪 处 理 
程序 、 实 用 哨 数 、DOM 元 素 的 创建 ， 以 及 如 何 扩展 jQuery。 

第 2 草 介绍 jQuery 包装 集 ( wrapped set )， 这 是 jQuery 运行 的 核心 概念 。 我 们 将 学 习 如 何 通 
过 丰富 而 强大 的 jQuery 选择 需 , 从 页面 上 选取 元 素 并 创建 这 些 包 装 集 ( 可 被 操作 的 DOM 元 素 集 
合 )。 这些 选 择 器 使 用 标准 的 CSS 选择 符号 ， 这 使 得 它们 非常 强大 ， 而 这 些 CSS 知识 我 们 可 能 
已 战 知 。 

第 3 草 我 们 将 学 习 如 何 使 用 jQuery 包装 集 来 操作 页 面 DOM 元 素 。 这 将 包含 改变 元 系 的 样式 
和 特性 、 设 置 元 系 内 容 、 移 动 元 系 、 从 头 创 建 元 素 以 及 处 理 表单 元 系 。 

第 4 章 展 示 了 如 何 使 用 jQuery 极 大 地 人 简化 页 面 上 的 事件 处 理 。 毕 葛 ， 啊 应 用 户 事件 使 交互 式 
Web 应 用 变 得 可 能 ， 那 些 路 浏览 融 实 现 复杂 事件 处 理 的 开发 人 员 ， 一 定 会 感激 jQuery 为 这 一 领 
域 带 来 的 便利 。 本 曹 还 详细 人 研究 了 高 级 事件 处 理 概念 ， 比 如 事件 命名 空间 、 目 定义 事件 的 触发 和 
处 理 ， 甚 至 创建 “live” 事 件 处 理 程序 ， 并 组 成 一 个 完整 的 项 目 示例 。 

第 $ 草 的 主题 是 动画 和 特效 。 我 们 将 看 到 jQuery 使 创建 动画 特效 不 仅 没 有 痛 兰 ， 而 且 高 效 且 
充满 乐趣 。 为 顺序 执行 动画 准备 的 函数 队列 ， 以 及 普通 的 函数 回 汕 也 在 讨论 之 列 。 

第 6 章 将 学 习 jQuery 提供 的 实用 函数 和 标志 ， 这 些 内 容 不 仪 适合 页 面 开 发 人 员 ， 也 适合 ; 
jQuery 编写 扩展 和 插件 的 开发 人 员 。 

第 7 曹 关注 扩展 和 插件 的 开发 。 我 们 会 看 到 jQuery 使 其 变 得 极其 简单 ,无 需 次 奥 的 JavaScript 
或 jQuery 知识 ,任何 开发 人 员 都 可 以 编写 扩展 ， 也 会 看 到 为 什么 需要 将 可 重用 的 代码 封装 为 
jQuery 扩展 。 

第 8 章 关 注 现 代 Web 应 用 开发 中 一 个 非常 重要 的 领域 : 发 起 Ajax 请 求 。 我 们 将 看 到 jQuery 
使 网 页 上 的 Ajax 开发 变 得 如 此 简单 ， 并 防止 我 们 反 和 向 见 的 陷阱 ， 同 时 大 大 人 简化 了 使 用 靖 用 数 
据 类 型 的 Ajax 交互 ( 比如 返回 JSON 结构 ),。 男 一 个 综合 示例 ， 则 涵盖 了 我 们 所 学 的 jQuery 的 各 
个 方面 。 

第 二 部 分 包含 3 章 ， 我 们 将 学 习 jQuery 配套 的 界面 库 jQuery UI。 

第 9 章 介 绍 了 jQuery UI 库 ， 解 释 了 如 何 配置 和 获取 该 库 的 代码 定制 版 本 ， 以 及 如 何 使 用 可 
视 主题 样式 来 实现 不 同 的 界面 效果 。 我 们 齐 析 了 可 视 主 题 , 不 仅 可 以 了 解 它们 是 如 何 工 作 的 ,还 
可 以 修改 主题 以 满足 我 们 的 和 需求。 围绕 本 章 我 们 讨论 了 jQuery UI 库 为 jQuery 核心 所 做 的 扩展 ， 
以 及 如 何 利 用 这 些 扩展 的 优势 来 增强 核心 方法 。 

第 10 草 人 研究 了 jQuery UI 提 供 的 鼠标 交互 能 力 。 无 论 是 从 元 素 拖 放 ， 还 是 元 素 排序 、 选 择 以 
及 改变 大 小 等 操作 ， 它 都 提供 了 文 持 。 
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关于 本 书 3 





最 后 ,第 11 章 全 面前 释 了 jQuery UI 控件 集 ， 这 个 部 件 集 扩 展 了 现 有 的 页 面 输入 机 制 。 包 括 
从 类 似 按 钮 的 简单 控件 到 复杂 控件 ， 比 如 日 期 选择 大 、 目 动 完 成 控件 、 选 项 卡 面板 以 及 对 话 框 控 
件 等 。 

我 们 在 附录 中 介绍 了 了 JavaScript 的 基本 概念 ， 比 如 滑 数 上 下 文 和 闭 包 。 对 于 新 手 或 者 希望 回 
顾 旧 知识 的 开发 人 员 ， 理 解 这 些 概念 将 有 助 于 更 高 效 地 使 用 jQuery。 


页 边 图 标 


在 本 书 中 ， 为 了 说 明 jQuery 和 jQuery UI 的 概念 ， 我们 编号 了 独特 的 实验 室 页 面 。 这 些 实 验 
室 页 面 是 可 交互 的 网 页 ， 附 有 可 下 载 的 示例 代码 ， 你 可 以 在 本 机 打开 并 运行 它们 。 

引入 新 的 实验 室 页 面 时 ， 页 面 左 侧 边栏 处 会 有 一 个 实验 室 图 标 〈 左 侧 所 示 锥 形 瓶 图 标 )， 便 
于 你 能 够 在 书 中 一 眼看 出 实验 室 页面 首 次 引入 的 位 置 。 在 下 载 的 示例 代码 首页 包含 了 实验 室 页面 
的 链接 。 

你 还 可 以 通过 远程 站 点 http:/www.bibeaultorg/jqia2 或 图 灵 社 区 www.ituring.com.cn 访问 实验 
室 页 面 以 及 示例 代码 的 其 余部 分 。 

另外 一 个 贯穿 全 书 的 图 标 是 练习 图 标 〈 三 角形 和 铅笔 )， 它 们 指出 你 需要 做 练习 的 地 方 。 通 
常情 况 下 ,这些 练习 与 特定 的 实验 室 页 面相 关联 , 但 有 时 它们 是 本 书 中 其 他 代码 的 逻辑 扩展 , 或 
者 是 独立 的 简单 练习 题 。 完 成 这 些 练习 有 助 于 你 更 加 深入 地 了 人 解 jQuery。 


代码 约定 


所 有 代码 清单 或 者 正文 中 的 源 代 码 都 采用 这 样 的 字体 ( jQuery Code )， 以 示 区 分 。 正 文中 
的 方法 和 函数 名 、 对 象 属性 、XML 元 素 以 及 节点 属性 也 以 这 种 字体 呈现 。 

有 些 例子 中 ,原始 的 源 代 码 已 经 被 排版 以 适合 在 页 面 上 显示 。 一 般 来 说 ， 源 代码 样式 的 改变 
主要 是 由 于 页 面 宽度 的 限制 , 但 有 时 你 会 发 现 书 中 的 代码 和 下 载 的 源 代码 格式 略 有 差异 。 在 少数 
情况 下 ， 为 了 不 改变 长 代码 行 的 含义 ， 不 会 对 它们 进行 重 排 ， 而 是 采用 续 行 记号 。 

代码 清单 中 的 注释 是 为 了 强调 重要 的 概念 。 在 很 多 情况 下 , 代码 中 市 圈 的 数字 与 随后 正文 中 
出 现 相同 带 圈 数 字 的 地 方 一 一 对 应 。 


代码 下 载 


本 书 中 所 有 的 源 代码 示例 ( 包括 那些 没有 在 正文 中 出 现 的 额外 示例 )， 都 可 以 从 http://www. 
manning.com/jQueryinActionSecondEdition 下 载 ,为 了 方便 那些 无 法 在 本 地 运行 示例 代码 的 开发 人 
员 ， 我 们 为 示例 代码 创建 了 一 个 在 线 版 本 http://www.bibeault.org/jqia2/。 

本 书 中 的 代码 示例 被 组 织 成 Web 应 用 程序 ， 每 间 独 立 一 块 ， 方便 使 用 者 随时 通过 本 地 Web 
服务 硕 获 取 服 务 ， 比 如 Apache 的 HTTP 服务 大 。 你 可 以 将 下 载 的 代码 解压 缩 到 一 个 文件 严 ， 并 
设置 此 文件 夹 为 应 用 程序 根 目录 。 局 动 页 面 就 是 这 个 目录 下 的 index.html 文件 。 
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4 关于 本 书 


除了 描述 Ajax 请 求 的 第 8 童 以 及 jQuery UI 的 少数 几 章 , 大 部 分 的 示例 都 可 以 在 浏览 锅 直 接 
打开 ， 而 无 需 使 用 Web 服务 项 。Ajax 示例 需要 使 用 Apache 所 不 具备 的 后 端 交 互 能 力 ， 因 此 要 想 
在 本 地 运行 这 些 示 例 ,需要 为 Apache 安装 PHP 服务 ,或 者 使 用 可 以 执行 Java 小 程序 ( Java servlets ) 
或 JSP (JavaServer Pages ) 的 服务 器 ， 比 如 Tomecat。 文 件 chapter8/tomcat.pdf 将 指导 你 轻松 地 安 
疾 Tomcat 服务 磊 以 便 运行 Ajax 示例 。 

所 有 的 代码 示例 在 各 个 主流 浏览 瘟 下 已 测试 通过 ， 包 括 了 正 7/8、Firefox 3、Safari 3/4 以 及 
Google Chrome。 


< 友 所 但 
人 交流 反 饥 


购买 本 书后 , 你 可 以 访问 http:/www.manning.com/jQueryinActionSecondEdition 发 表 对 本 书 
的 评论 ， 询 问 技术 问题 以 及 获取 其 他 用 户 的 帮助 。” 











Q 读者 也 可 以 访问 图 灵 社 区 (ituring.com.cn ) 发 表 对 本 书 的 评论 。 一 一 编者 注 


图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 


大 于 封面 插图 





本 书 封 面 上 的 画像 名 称 是 “守望 者 ”, 摘自 200 百 年 前 法 国人 J.G.St.Saveur 所 著 的 《旅行 百科 》。 
在 那个 年 代 ， 人 们 对 为 了 获得 乐趣 而 旅行 感到 很 新 鲜 ， 类 似 的 旅行 指南 大 受 欢 迎 ， 旅 行者 和 足 不 
出 户 的 人 们 从 旅行 指南 上 了 解 世 界 各 地 的 风土 人 情 ， 其 中 还 包括 法 国士 兵 、 公 务 员 、 手 工艺 者 、 
商人 和 农民 在 不 同 地 区 的 服装 样式 和 制服 样式 。 

《旅行 百科 》 通 过 各 种 各 样 的 图 片 生动 地 描绘 了 200 年 前 世界 其 他 城镇 的 不 同 特色 。 人 们 彼此 
孤立 ,拥有 各 自 的 方言 和 话 言 。 可 以 很 容易 地 通过 人 们 的 语言 和 穿着 ， 判 定 其 居住 的 地 方 是 城镇 
还 是 乡村 ， 从 事 的 职业 以 及 拥有 的 地 位 。 

从 那 时 起 , 服饰 样式 有 了 很 大 的 变化 , 各 个 地 域 原 有 的 多 种 多 样 的 服饰 正在 逐渐 消失 。 现在 ， 
我 们 通常 很 难 区 分 两 个 不 同 地 区 的 人 。 也 许 ， 乐观 地 看 ,我 们 是 用 文化 和 外 表 上 的 多 样 性 来 换取 
更 加 多 元 化 的 生活 ， 或 者 说 多 元 化 的 、 充 满 趣味 的 智 匡 人 生 。 

这 本 两 个 世纪 前 的 旅行 指责 充分 展示 了 各 地 多 姿 多 彩 的 地 域 风 情 ，Manning 出 版 社 用 这 本 指 
南 中 的 一 幅 插 图 作为 封面 ， 以 赞美 计算 机 行业 的 创新 性 、 开 拓 精 神 和 纺 含 的 无 穷 乐趣 。 
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核心 jQuery 





当 人 们 听 说 jQuery 这 个 名 称 时 ， 就 会 目 然 而 然 地 想到 核心 jQuery 库 ; 然而 jQuery 的 意义 
不 仅 于 此 ， 它 创建 了 一 个 围绕 核心 jQuery 的 生态 系统 ， 比 如 衍生 的 jQuery UI ( 本 书 第 二 部 分 讨 
论 的 主题 )、 官 方 插 件 ( 参见 http://plugins.jquery.com/ ) 以 及 大 量 的 非 官 方 插 件 ， 我 们 可 以 通过 
搜索 引擎 很 容易 地 找到 它们 (在 Google 中 搜索 “jQuery plugin” 会 有 超过 400 万 项 结果 ! )。 

就 像 苹 果 的 iPod 一 样 ， 如 果 它 本 刁 不 够 优秀 ， 那 么 为 它 扩展 的 第 三 方 产 品 市 场 也 就 不 会 存 
在 一 样 ， 核 心 jQuery 库 是 这 一 切 繁华 的 基础 。 

本 书 第 一 部 分 共 8 章 ， 我 们 将 会 从 头 学 习 核 心 jQuery 库 。 当 你 完成 这 几 章 的 学 习 后 ， 你 会 
发 现 jQuery 库 一 应 俱全 ， 这 个 客户 端 工具 极其 强大 可 以 随时 应 用 到 任何 Web 开发 项 目 中 。 你 可 
能 还 会 使 用 jQuery 插件 库 〈 就 像 iPod 配件 一 样 )， 它 们 一 定 有 目 身 存在 的 价值 。 

因此 请 翻 开 新 的 一 页 ,仔细 阅读 并 准备 好 为 你 的 Web 开发 注入 活力 ， 你 会 发 现 这 不 仅 简 单 
而 且 充 满 乐 趣 ! 
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jQuery 基础 





本 章 内 容 

口 为 什么 使 用 jQuery 

口 不 唐 突 的 JavaScript 的 含义 

D jQuery 的 基本 原理 和 概念 

口 结合 其 他 JavaScript 库 使 用 jQuery 


JavaScript 从 诞生 那天 起 就 被 很 多 Web 开发 人 员 哺 突 为 “玩具 ”声言 ， 然 而 在 过 去 的 几 年 时 
则 里 ， 人 们 逐渐 对 高 交互 性 的 下 一 代 Web 应 用 (也 被 称 为 关注 画 互 联网 应 用 或 者 基于 DOM 的 脚 
本 应 用 ) 以 及 Ajax 技术 产生 了 热情 ， 从 而 使 JavaScript 又 重 获 关注 。 由 于 客户 端 开 发 人 员 已 经 抛 
弃 剪 切 和 粘贴 JavaScript 的 开发 方式 ， 转 而 使 用 方便 快捷 、 功 能 完善 的 JavaScript 库 ， 因 此 这 门 
语言 也 得 到 了 长 趾 的 快速 发 展 。 这 些 库 彻 底 解决 了 器 浏览 兹 问题 ， 并 提供 了 新 新 的 、 改 进 了 的 
Web 开发 模式 。 

作为 一 个 相对 年 轻 的 JavaScript 库 ，jQuery 以 迅雷 不 及 掩 耳 之 势 席卷 了 整个 Web 开发 社区 ， 
很 快 戊 得 了 几 家 大 公司 的 文 持 并 被 应 用 于 其 关键 的 产品 中 。jQuery 的 一 些 典 型 用 户 包 括 IBM、 
Netflix、Amazon、Dell、Best Buy、Twitter 美国 银行 以 及 很 多 其 他 的 知名 企业 。 微软 甚至 把 jQuery 
和 Visual Studio 工具 一 块 发 布 ， 而 诺基亚 则 在 所 有 的 手机 平台 以 及 WRT ( Web Runtime 
Component ) 上 使 用 jQuery。 

这 些 都 是 jQuery 足以 炫 炊 的 资本 1 

和 其 他 更 加 关注 智能 化 的 JavaScript 工具 包 不 同 , jQuery 的 目标 是 改变 Web 开发 人 员 创 建 高 
交互 性 页 面 的 方式 。 设 计 者 无 需 花 费时 间 纠 缠 JavaScript 复杂 的 高 级 特性 ， 而 是 使 用 现 有 的 知识 
比如 CSS (Cascading Style Sheets， 层 苔 样式 表 )、HTML ( Hypertext Markup Language， 超 文本 
标记 语言 )、XHTML ( Extensible Hypertext Markup Laneuage， 扩展 的 超 文本 标记 语言 ) 以 及 原生 
的 JavaScript 直接 操作 页 面 元 系 ， 从 而 实现 快速 开发 。 

本 书 中 ， 我 们 会 深入 学 习 jQuery 为 高 交互 性 Web 应 用 程序 开发 者 提供 的 功能 。 下 面 来 探索 
jQuery 为 Web 开发 盛宴 市 来 的 实 实在 在 的 好 处 吧 。 

你 可 以 从 jQuery 网 站 〈http:/jquery.com/ ) 获取 最 新 版 本 的 jQuery。 安 状 jQuery 相当 侧 单 ， 
只 需 将 它 放 在 应 用 程序 目录 并 在 页 面 中 使 用 HITML 标签 <script> 来 包含 它 ， 就 像 下 面 这 样 : 
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1.1 用 少量 代码 实现 丰富 的 功能 3 


<script type="text/jJavascript" 
src="scripts/jJquery-1.4.js"></script> 


本 书 中 使 用 的 jQuery 版 本 可 以 从 下 载 的 示例 代码 中 找到 ( http:/www.manning.com/bibeault2 )。” 


1.1 用 少量 代码 实现 丰富 的 功能 


如 采 你 曾经 尝试 为 页 面 添加 一 些 动态 的 功能 , 那么 你 就 会 发 现实 现 的 模式 经 党 是 相同 的 , 首 
先 选 择 一 个 元 系 ( 或 者 一 组 元 素 )， 然 后 以 某 种 方式 操作 这 些 元 素 。 你 可 以 显示 或 隐藏 元 素 ， 给 
元 素 谎 加 CSS 类 ， 让 元 素 动 起 来 或 者 改变 元 素 的 特性 。 

使 用 原始 的 JavaScript 完成 这 些 任务 中 的 任何 一 个 ， 痢 需要 数 十 行 的 代码 ， jQuery 的 开 发 者 
们 专门 为 此 创建 了 jQuery 库 来 简化 这 些 常 见 任务 。 例 如 ， 有 过 处 理 单 选 按 钮 分 组 经 验 的 开发 人 
员 都 知道 ， 找 出 分 组 中 哪个 元 系 被 选中 并 获取 它 的 value 特性 是 非常 乏味 的 ; 首先 需要 找 出 单 
选 按钮 分 组 , 其 次 获取 由 这 些 单 选 按钮 元 素 组 成 的 数组 并 逐个 忆 历 , 找 出 哪个 元 系 拥 有 checked 
特性 ， 最 后 获取 此 元 素 的 value 特性 。 

过 去 人 们 通过 如 下 代码 来 实现 : 

Var checkedValue; 

Var elements = document .getEljementsByTagName ('input').; 

for (var n = 0; n < elements.length; n++) ({ 
] .type == 'radio' &é& 
.name == 'someRadioGroup’' &é& 

elementsln].checked) { 

checkedValue = elements[n] .value; 


} 
} 


而 jQuery 只 需要 一 行 代 码 就 能 实现 相同 的 功能 : 

var checkedvalue = $('[name="someRadioGroup"] :checked') .val(); 

如 果 这 有 段 代码 看 起 来 有 点 神秘 请 不 用 担心 。 很 快 你 就 能 搞 异 它 的 工作 原理 , 并 创建 出 简洁 而 
强大 的 jQuery 代码 来 武装 你 的 页 面 。 下 面 简 单 看 一 下 这 个 强大 的 代码 厂 段 是 如 何 工 作 的 。 

自 完 , 找 出 所 有 name 特性 值 为 someRadioGroup 的 元 素 ( 别 忘记 单 选 按钮 分 组 是 由 一 系列 
拥有 相同 名 称 的 单 选 按钮 元 素 组 成 的 ) 然后 过 滤 这 个 集合 从 而 得 到 处 于 checked 状态 的 那个 单 
选 按钮 ， 并 获取 它 的 value 特性 。( 只 可 能 有 一 个 符合 条 件 的 元 素 ， 因 为 浏览 硕 只 允许 选中 同一 
分 组 中 的 一 项 单 选 按钮 。) 

这 条 jQuery 语句 的 真正 威力 来 自选 择 器 ， 它 是 一 个 识别 页 面 元 素 的 表达 式 。 它 帮助 我 们 轻 
松 找到 并 获取 需要 的 元 素 。 在 上 面 的 例子 中 ， 丈 是 单 选 按钮 分 组 中 被 选中 的 元 系 。 

如 采 你 还 没有 下 载 示 例 代 码 ， 现 在 就 去 下 载 吧 。 下 载 链接 就 在 本 书 的 官方 网 站 : http://www. 
manning.com/bibeault2( 别 蕊 记 链 接 中 最 后 的 字符 2 )。 把 下 载 的 代码 解压 缩 到 任意 文件 夹 之 后 ， 
可 以 打开 单独 的 文件 ， 也 可 以 通过 根 目录 下 的 索引 页 (index.html ) 访问 任意 文件 。 

在 浏览 锅 中 打开 文件 chapterl/radio.group.html, 如 图 1-1 所 示 , 这 个 示例 展示 了 如 何 使 用 jQuery 
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中 读者 也 可 以 登录 图 灵 社 区 下 载 源 代码 ， 网 址 : www.ituring.com.cn。 一 一 编者 注 


图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 


4 第 1] 章 jQuery 基础 


获取 单 选 按钮 分 组 中 被 选中 的 元 系 。 

这 个 简单 的 例子 应 该 可 以 使 你 信服 ，jQuery 能 够 以 轻松 的 方式 创建 高 度 交 互 的 下 一 代 Web 
应 用 程序 。 随 着 对 本 书 各 章 的 学 习 , 我 们 将 会 逐渐 揭 开 jQuery 的 神秘 面纱 , 让 你 全 面 感 受 jQuery 
区 了 驭 页 面 的 强大 能 

我 们 很 快 就 会 学 习 如 何 创建 jQuery 选择 髓 ， 正 是 它 使 得 本 例如 此 简单 ， 但 是 先 来 了 解 一 下 
jQuery 作者 对 于 如 何在 页 面 上 最 有 效 地 使 用 JavaScript 有 什么 样 的 想法 。 


QnNO Radio Group Example = 




























Ey 2 © http://localhost/ijqia2 /chapterl /radio.group.html 






What is your answer? OO Yes © No 图 Maybe OQ I dunno 


Which? 





The radio element with value maybe is checked. 


图 1-1 使 用 一 条 jQuery 表达 式 轻松 获取 被 选中 的 单 选 按钮 


1.2 不 唐 突 的 JavaScript 


记得 在 CSS 出 现 之 前 糟糕 的 往日 吗 ? 那 时 我 们 不 得 不 在 HTML 页 面 中 混合 使 用 样式 标记 和 
文档 结构 标记 。 任 何 一 个 网 页 开发 人 员 , 无 论 从 事 开 发 的 时 间 长 短 ， 都 一 定 会 对 这 种 陈旧 的 开发 
方式 深恶痛绝 。 

CSS 的 出 现 让 Web 开发 人 员 可 以 将 样式 信息 从 文档 结构 中 分 离 出 来 ， 而 且 握 弃 了 老式 的 
<font> 等 标签 "。 将 样式 从 文档 中 分 离 出 来 不 仅 有 利于 页 面 的 维护 ， 而 且 能 够 使 我 们 只 需 通 过 切 
换 样式 表 就 能 完成 页 面 的 换 肤 功能 。 

很 少 有 人 愿意 再 将 样式 辞 人 HTML 元 素 中 ， 然 而 下 面 的 代码 却 依 然 很 常见 。 

J 

onclick="document .getElementById('xyz') .style.color='red';"> 


Click Me 
</button> 


可 以 清楚 地 看 到 ， 这 个 按钮 的 样式 ( 包括 按钮 标题 的 字体 ) 不 是 通过 废弃 的 <font> 标 签 或 
者 其 他 样式 标签 设置 的 ， 而 是 通过 某 种 应 用 到 页 面 上 的 CSS 规则 (没有 列 出 ) 设置 的 。 尽 管 这 
里 的 声明 没有 把 样式 和 结构 混合 在 一 起 ,但 是 它 把 单 击 按钮 时 需要 执行 的 JavaScript 脚本 《〈 本 例 
中 , 脚本 把 ia 值 为 xyz 的 DOM 元 系 的 闫 色 改 为 红色 ) 放 在 了 按钮 标签 的 onclick 特性 中 ,这 
使 得 行为 和 结构 混合 在 了 一 起 。 

下 面 来 看 看 怎么 改进 这 种 情况 。 














Q) HTML 4.01 不 赞成 使 用 <font> 标 签 , 而 HIMLS 已 经 不 支持 这 个 标签 了 。( 以 下 注释 如 非特 别 指明 , 均 为 译 者 注 。) 


图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 


1.2 不 唐 突 的 JavaScript 5 


1.2.1 行为 和 结构 分 离 CC 
WW 


束 像 在 HTML 文档 中 应 该 把 样式 从 结构 中 分 离 出 来 一 样 , 我 们 有 同样 的 理由 把 行为 从 结构 中 
分 离 出 来 。 

理想 情况 下 ，HTML 页 面 应 该 按照 图 1-2 的 方式 来 组 织 结构 、 样 式 和 行为 3 部 分 ， 每 一 部 分 
都 有 属于 目 己 的 位 置 。 






<html> 
<head> 












样式 
a A 


</head> 
<body> 


</body> 
</html> 





图 1-2 ”将 结构 、 样 式 和 行为 整齐 地 放置 在 页 面 的 不 同 部 分 ， 最 大 限度 地 确保 了 可 该 性 和 可 维护 性 


这 种 策略 被 称 为 不 唐 突 的 JavaScript， 是 由 jQuery 的 开发 者 引入 公众 视野 的 ,已 经 扎根 于 所 
有 主要 的 JavaScript 类 库 中 ， 它 能 帮助 页 面 开 发 者 在 页 面 中 实现 这 各 有效 的 分 离 。 随 着 jQuery 对 
这 一 概念 的 推广 ，jQuery 的 核心 也 在 逐步 优化 以 便 更 加 容易 地 生成 不 唐 突 的 JavaScript 代码 。 不 
唐 突 的 JavaScript 认 为， 任何 存在 于 HTML 页 面 <boqy> 内 部 的 JavaScript 代码 都 是 错误 的 ， 这些 
错误 代码 或 者 存在 于 HTML 元 素 特 性 ( 比如 onclick 特性 ) 中 , 或 者 存在 于 页 面 <pody> 脚 本 块 中 。 

你 或 许 会 问 :“ 如 果 不 使 用 onclick 特性 ， 如 何 为 按钮 添加 行为 呢 ? ”考虑 下 面 按钮 元 系 的 
变化 : 

<button type="button" id="testButton">Click Me</button> 

这 就 简单 多 了 1! 但 你 会 发 现 ， 现在 的 按钮 不 能 做 任何 事情 了 。 你 可 以 一 直 不 停 地 单 击 它 , 但 
是 没有 任何 反应 。 

下 面 就 来 解决 这 个 问题 。 
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1.2.2 ”分 离 脚本 


我 们 可 以 将 按钮 的 行为 移 到 <headq> 标 签 里 的 脚本 块 中 ， 而 不 是 把 它们 写 在 标记 里 ， 这 样 脚 
本 就 被 移出 了 <body> 之 外 ， 如 下 所 未 : 


<script type="text/javascript"> 





window.onload = function() f{ 
document .getElementById('testButton') .onclick = function() { 
document .getElementBylId('xyz') .style.color = 'red',， 
}; 
}; 
</script> 





我 们 把 脚本 放 在 页 面 的 onload 处 理 晒 数 中 ， 并 将 一 个 内 联 呆 数 赋 给 按钮 元 又 的 onclick 
特性 。 

之 所 以 将 这 段 脚本 放 在 onload 处 理 函 数 中 ( 而 不 是 直接 放 在 内 联 代 码 块 中 )， 是 因为 我 们 
要 确保 在 使 用 按钮 元 素 之 前 ， 它 已 经 存在 于 页 面 中 了 。( 在 1.3.3 节 中 ， 我 们 将 看 到 jQuery 提供 
了 更 好 的 地 方 来 放置 这 些 代码 。) 





注意 D0000000000000000000000000000000000000 
UDOD0DODUO0O00O0D000U0000000000U00000U00D0UUUUUD 
UDUDOUUDUUUUUUUD 


如 采 本 例 的 代码 看 起 来 不 太 好 理解 〈 比 如 冰 数 字面 值 与 内 联 郧 数 的 概念 )， 也 不 要 担心 ! 为 
了 帮助 你 更 高 效 地 使 用 jQuery， 本 书 附 录 包 含 了 你 需要 掌握 的 重要 JavaScript 概念 。 本 章 的 剩余 
部 分 将 探讨 jQuery 如 何 帮助 我 们 更 加 轻松 和 快速 地 编写 上 述 代 码 ， 并 保持 代码 的 通用 性 。 

不 唐 突 的 JavaScript 是 一 项 强大 的 编程 技术 ,为 Web 应 用 开发 引入 了 清晰 的 职责 划分 ,但 这 
样 做 也 是 有 代价 的 。 你 可 能 已 经 注意 到 , 与 直接 在 按钮 标记 中 放置 脚本 相 比 , 不 唐 突 的 JavaScript 
需要 编写 更 多 行 代码 来 实现 同样 的 功能 。 不 唐 突 的 JavaScript 可 能 会 增加 代码 的 行 数 ， 并 且 它 还 
需要 客户 闪 脚 本 还 守 一 些 规 则 并 且 应 用 展 好 的 编码 模式 。 

但 这 未 和 不 是 一 件 好 事 ， 它 能 够 促使 我 们 以 编写 服务 需 端 代码 的 严谨 态度 来 编写 客户 端 代 
人 码 。 但 那 需 要 做 很 多 额外 的 工作 如 条 没有 jQuery 的 话 。 

如 前 所 述 ，jQuery 团队 尤其 注重 以 简单 和 愉快 的 方式 在 页 面 上 使 用 不 唐 突 的 JavaScript， 而 
无 需 付出 大 量 精力 编写 大 段 代 码 。 我 们 将 发 现 ， 有 效 利用 jQuery 能 够 有 助 于 用 更 少 代 码 实 现 更 
多 的 功能 。 

事 不 宜 迟 ， 下 面 就 开始 介绍 如 何在 jQuery 的 帮助 下 轻松 地 为 页 面 洪 加 丰富 的 功能 。 


1.3 jQuery 基础 


jQuery 主要 关注 从 HTML 页 面 上 获取 元 系 并 对 它们 进行 操作 ， 这 是 jQuery 的 核心 。 如 果 你 
束 悉 CSS， 那 么 对 选择 右 的 强大 功能 一 定 印 象 深 刻 ， 它 通过 类 型 、 特 性 或 在 文档 中 的 位 置 来 描 
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述 元 素 集 合 。 有 了 jQuery， 你 就 能 够 利用 现 有 知识 发 挥 选 择 需 的 强大 威力 ， 极 大 地 简化 JavaScript 
代码 。 

jQuery 的 首要 目标 就 是 确保 在 所有 主要 浏览 厚 下 都 能 流畅 地 运行 代码 。 很 多 JavaScript 难题 
(比如 等 竺 页面 加 载 完 毕 后 才能 执行 页 面 操 作 ) 都 已 经 被 jQuery 轻松 地 解决 了 。 

如 条 需要 更 多 的 功能 ,jQuery 还 通过 插件 提供 了 人 简单 而 强大 的 内 置 方 法 , 以 扩展 其 现 有 的 功 
能 。 很 多 jQuery 新 手 发 现 他 们 在 学 习 的 第 一 天 就 能 目 己 编写 插件 了 。 

下 面 开 始 学 习 如 何 借助 CSS 的 现 有 知识 来 生成 强大 而 简洁 的 代码 。 





1.3.1 jQuery 包装 器 


当 为 了 使 设计 和 内 容 分 离 而 把 CSS 引入 Web 技术 的 时 候 ， 需 要 以 某 种 方法 从 外 部 样式 表 中 
引用 页 面 中 的 元 素 组 。 这 种 方法 就 是 选择 恬 ， 它 可 以 根据 元 素 的 类 型 、 特 性 或 者 元 素 在 HTML 
文档 中 的 位 置 来 精确 地 描述 元 素 。 

熟悉 XML 的 开发 者 可 能 会 联想 到 使 用 XPath 选择 XML 文档 中 的 元 素 。CSS 选择 器 使 用 了 
同样 强大 的 概念 ， 但 为 了 适用 于 HTML 页 面 而 做 了 优化 ， 从 而 更 加 简洁 且 更 易 理解 。 

比如 ， 选 择 需 

p a 

引用 位 于 <p> 元 系 内 的 所 有 超 链 接 ( <a> 元 素 ) 集合 。jQuery 使 用 相同 的 选择 咒 ， 不 仅 文 持 
常用 的 CSS 选择 器 ， 而 且 文 持 一 些 没 有 被 所 有 浏览 吉 完 全 实现 的 选择 器 ,甚至 包括 CSS3 中 定义 
的 一 些 强 大 的 选择 骨 。 

要 选择 一 组 元 系 ， 只 需 使 用 如 下 的 简单 语法 将 选择 需 传 递 给 jQuery 孔 数 。 

S(Selector) 

或 者 

jQuery (selector) 

可 能 一 开始 你 会 觉得 $ () 符 号 有 点 儿 奇 怪 , 不 过 大 部 分 jQuery 用 户 会 很 快 喜欢 上 这 种 简洁 的 
语法 。 比 如 ， 选 择 位 于 <p> 元 素 内 的 一 组 链接 ， 可 以 使 用 如 下 代码 : 

"DD 有 

s$() 国 数 (jouery () 函数 的 别名 ) 返回 特殊 的 JavaScript 对 象 ， 它 包含 与 选择 右 相 匹配 的 
DOM 元 系数 组 ， 这 个 数组 中 的 元 系 是 按照 在 文档 中 的 顺序 排列 的 。 这 个 对 象 拥 有 大 量 有 用 的 预 
定义 方法 ， 可 作用 于 已 收集 的 元 素 集 合 。 

在 编程 用 语 中 ， 这 种 构造 方法 称 为 包装 器 ( wrapper ) ， 因 为 它 包 装 了 收集 到 的 元 素 并 添加 
了 扩展 功能 。 我 们 使 用 术语 jQuery 包装 器 或 者 包装 集 ， 来 指 这 些 可 以 通过 jQuery 定义 的 方法 操 
作 的 含有 匹配 元 素 的 集合 。 

假如 想 隐 藏 所 有 类 名 为 notLongForThisworld 的 <qiv> 元 素 , 就 可 以 使 用 以 下 jQuery 代码 : 

S("QqIv.notLongEorThISsWor1ad" ) .hide(); 


这 样 的 方法 有 很 多 ， 通 常 称 为 jQuery 包装 器 方法 ， 它 们 有 一 个 特点 一 一 当 执 行 完 毕 后 ( 比 



































图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 


8 第 1] 章 jQuery 基础 


如 隐藏 操作 ) 会 返回 相同 的 一 组 元 素 , 以 便 为 另 一 个 操作 做 准备 。 例 如 , 假设 除了 隐藏 这 些 元 素 ， 
我 们 还 想 为 每 一 个 元 系 增 加 一 个 新 的 类 removed。 可 以 这 样 写 : 

$s("div.notLongForThisWorld") .hide() .addClass ("removed").; 

这 些 jQuery 作用 链 可 以 无 限 延 续 。jQuery 作用 链 绢 延 数 十 种 方法 的 示例 也 不 罕见 。 因 为 
一 种 方法 都 作用 在 与 最 初 的 选择 天 相 匹配 的 元 素 集 上 , 所 以 没有 必要 抽 历 元 素 集 。jQuery 已 经 为 
我 们 在 后 台 完 成 了 这 一 切 ! 

尽管 选择 的 对 象 组 通过 一 个 高 度 复 杂 的 JavaScript 对 象 来 呈现 ,但 是 如 果 有 必要 的 话 ， 也 可 
以 把 它 当 做 普通 的 元 素数 组 来 对 待 。 因 此 ， 下 面 两 段 代码 的 结果 相同 : 


Ss("#someElement") .html ("I have added some text to an element").， 




















和 


Ss("#someElement") [0] .innerHTML = 
"I have added some text to an element".， 


由 于 使 用 了 ID 选择 带 ， 因 此 选择 右 只 能 匹配 一 个 元 素 。 第 一 个 示例 使 用 jQuery 的 html () 方 法 ， 
用 一 些 HTML 标记 替换 DOM 元 素 的 内 容 。 第 二 个 示例 使 用 jQuery 获取 元 素数 组 ， 通 过 数组 下 
标 0 选择 第 一 个 元 了 系 ， 然 后 将 信 赋 给 一 个 稼 见 的 JavaScript 属 性 innerHTML 来 奉 换 内 容 。 

如 果 想 让 匹配 多 个 元 素 的 选择 天 达到 相同 的 效果 ， 下 面 两 个 代码 片段 将 会 产生 相同 的 结 
(但 第 二 个 不 是 jQuery 推 存 的 编程 方式 )。 


Ss("div.filljMeIn") 
.html ("I have added some text to a group of nodes").; 














和 


Var elements = S$("div.fillMeIn").; 
for(var i=0;i<elements.length;1i++) 
elements[1i] .innerHTML = 
"I have added some text to a group of nodes"; 


随 着 逻辑 逐渐 复杂 ， 使 用 jQuery 作用 链 可 以 不 用 改变 预期 结果 而 减少 代码 行 数 。 此 外 ，jQuery 
不 仅 支持 我 们 已 经 知道 并 且 嘉 爱 的 选择 器 ， 而 且 还 支持 更 高 级 的 选择 器 (作为 CSS 规范 定义 的 
一 部 分 )， 甚 至 是 一 些 自 定 义 选 择 融 。 

表 1-1 给 出 了 一 些 示例 。 








表 1-1 选择 器 示例 


选 择 器 结 果 
$ ("p:even") 选择 所 有 偶数 行 的 <p> 元 素 
mmmilod tL" 选择 每 个 表格 的 第 一 行 元 素 
Sitiody > div") 选择 作为 <pody> 和 直接 子 方 点 的 <div> 元 素 
St"alhrefs= “padf 7]") 选择 链接 到 PDF 文件 的 超 链接 元 素 
s("body > div:has (a)') 选择 作为 <pody> 直 接 子 节点 的 、 包 含 超 链接 ( <a> ) 的 <div> 元 素 
这 太 强 大 了 1 
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你 可 以 利用 已 经 掌握 的 CSS 知识 来 快速 入 门 并 提高 ， 然 后 学 习 jQuery 文 持 的 更 高 级 选择 
做 。 我 们 会 在 第 2 章 详细 介绍 jQuery 选择 种 ， 你 也 可 以 在 jQuery 站 点 找到 选择 带 的 完整 列表 
http://docs.Jquery.com/Selectors, 

选择 DOM 元 素来 进行 操作 是 Web 开发 中 的 常见 需求 ,但 有 些 需 求 和 DOM 元 又 毫 无 关系 。 
下 面 粗 略 考察 除了 元 系 操作 之 处 jQuery 还 提供 了 哪些 功能 。 











1.3.2 ”实用 函数 


尽管 包装 将 要 操作 的 元 素 是 jQuery $ () 图 数 最 常见 用 法 之 一 ,但 却 并 不 是 它 的 唯一 职责。s () 
印 数 的 另 一 个 职责 是 作为 一 些 通 用 实用 咀 数 集 的 命名 空间 前 组。 由 于 以 选择 器 为 参数 来 调用 $ () 
生成 的 jQuery 包装 融 赋 予 了 页 面 开 发 者 如 此 强大 的 力量 ， 以 至 于 大 部 分 的 页 面 开 发 者 很 少 会 用 
到 其 中 的 一 些 实用 孔 数 。 实 际 上 ， 直 到 第 6 章 我 们 才 会 详细 地 学 习 大 部 分 实用 函数 以 便 为 编写 
jQuery 插件 做 准备 。 不 过 下 面 的 几 节 将 会 用 到 一 些 实用 孔 数 ， 因 此 先 来 简单 了 解 一 下 。 

这 些 函 数 的 符号 初 看 起 来 可 能 会 有 点 奇怪 。 比 如 ,用 来 去 除 字 符 串 前 后 空格 的 实用 函数 ， 其 
调用 形式 如 下 : 

Var trimmed = $.trim(someString); 

如 果 你 觉得 $ .前 级 有 点 儿 怪 异 ， 就 记 住 s 是 JavaScript 中 的 标识 符 ， 和 其 他 的 标识 符 没 有 什 
么 不 同 。 使 用 标识 符 jQuery ( 而 不 用 别名 $ ) 来 调用 这 个 函数 ， 可 能 看 起 来 就 没 那 么 奇怪 了 如 : 

Var trimmed = jQuery.trim(someString);} 


现在 可 以 清楚 地 看 到 ，trim() 仪 仅 是 jQuery (或 它 的 别名 $ ) 命名 空间 下 的 一 个 水 数 。 



































注意 D0000000 jvey000000000000000000s00000010000 
DL JavaScniptDUDOUDUDUOUUOUUODUUU juveryUUUUU0UUUUU0UUOUUD 
DUDOUDO0OUOUUOUUUUUUUUUUUUUD 


我 们 会 在 1.3.5 市 中 学 习 一 个 用 来 帮助 扩展 jQuery 的 实用 函数 ,然后 在 1.3.6 方 中 学 习 男 一 个 
可 以 让 jQuery 和 其 他 客户 端 库 共 存 的 实用 函数 ,但 首先 要 看 一 下 jQuery 的 $ () 函数 的 力 一 个 重要 


职责 。 


1.3.3 ”文档 就 绪 处 理 程序 


当 尊 循 不 唐 突 的 JavaScript 原则 时 , 行为 就 从 结构 中 分 离 出 来 了 ， 因 此 我 们 要 在 文档 标记 外 
部 执行 对 页 面 元 素 的 操作 。 为 了 达到 这 一 目的 ,我 们 需要 一 种 在 页 面 DOM 元 厅 完 全 演 染 后 青 执 
行 操 作 的 方法 。 在 “ 单 选 按钮 分 组 ”示例 中 ， 必 须 在 整个 页 面 主体 加 载 完 毕 后 再 应 用 行为 。 

传统 上 ，window 实例 的 onload 处 理 程序 就 是 为 了 实现 上 述 目 的 ， 该 程序 在 整个 页 面 加 载 

















Q@ 可 以 假设 jQuery 的 内 部 实现 如 下 : function $(){} S$.trim=function(){}。 
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完毕 后 执行 代码 。 其 典型 的 语法 如 下 : 
window.onload = function() { 


U0LDUDO 


这 样 就 能 在 文档 完全 加 载 后 执行 定义 的 代码 。 然 而 ,浏览 右 会 延迟 执行 onloag 的 代码 ,不 
仅 是 在 创建 DOM 树 之 后 ,而 且 在 所 有 外 部 资源 全 部 加 载 完 毕 ， 并且 整 个 页 面 在 浏览 各 窗 口中 显 
不 完毕 之 后 。 这 些 资源 不 仪 包括 图 片 资 源 ， 而 且 包 括 舱 入 在 页 面 上 的 QuickTime 和 Flash 视频 资 
源 ， 如 今 这 类 资源 会 越 来 越 多 。 绪 果 是 ， 从 背 次 浏览 页 面 到 onload 脚本 执行 完毕 ,访问 者 将 会 
经 历 一 段 严 重 的 延 到 。 

更 糟糕 的 是 ， 如 有 果 图 片 或 者 其 他 资源 需要 很 长 时 间 来 加 载 ， 则 访问 者 就 需要 等 待 图 片 加 载 
完成 后 才能 使 用 丰 宣 的 页 面 行 为 。 这 会 使 不 唐 突 的 JavaScript 的 提议 , 在 很 多 实际 案例 中 遗 遇 滑 
S's 

更 好 的 方式 是 , 在 执行 脚本 以 便 应 用 丰 宦 行为 之 前 ， 只 需要 等 待 文档 结构 被 完全 解析 并 且 浏 
哆 可 已 经 把 HTML 转化 为 DOM 树 。 跨 浏览 右 完 成 这 个 任务 略 有 困难 ,但 是 jQuery 提供 了 一 个 
简单 的 方式 : 在 DOM 树 (而 不 是 外 部 资源 ) 加 载 完 毕 之 后 立即 触发 脚本 的 执行 。 正 式 的 语法 结 
构 〈 使 用 前 面 的 隐藏 元 素 的 例子 ) 如 下 所 示 : 


]Query (document) .ready (function() { 
Ss("div.notLongForThisWorld") .hide(); 
}); 


首先 ， 使 用 jQuery () 了 涵 数 包装 document 对 象 ， 然 后 调用 ready () 方 法 并 传递 一 个 在 文档 就 绪 
时 执行 的 函数 。 

上 述 语法 称 为 正式 语法 是 有 原因 的 ， 因 为 还 有 一 个 更 常用 的 简写 形式 ， 如 下 所 示 : 

]Query (function() f{ 


Ss("div.notLongForThisWorld") .hide(); 
}); 


通过 传递 一 个 函数 给 jQuery () 或 者 $() ， 我 们 通知 浏览 各 和 耳 到 DOM 被 完全 加 载 完 毕 〈 仅 仅 是 
DOM ) 后 再 执行 此 段 代码 。 更 棒 的 是 ， 可 以 在 一 个 HTML 文档 中 多 次 调用 此 函数 ,浏览 器 会 按 
照 它 们 在 页 面 中 声明 的 顺序 依次 调用 这 些 晒 数 。 与 此 相反 ，winaqovw 的 onload 机 制 只 允许 指定 
一 个 函数 。 如 有 果 包 含 的 任何 第 三 方 代码 出 于 目 且 考虑 使 用 onload 机 制 (并 非 最 佳 方法 )， 那 么 
这 个 限制 可 能 导致 难以 发 现 的 问题 。 

以 上 就 是 $ () 函数 的 为 一 种 用 法 ， 现 在 看 看 它 还 能 做 什么 。 









































1.3.4 ”创建 DOM 元 素 


目前 为 止 可 以 看 到 ,jQuery 的 开发 者 通过 赋予 $ () 因数 (仅仅 是 jQuery () 的 别名 ) 更 多 的 职 
责 ， 来 避免 向 JavaScript 命 名 空间 引入 大 量 的 全 局 名 称 。 不 过 ，$ () 函数 还 有 一 个 职责 需要 探讨 。 

可 以 通过 向 $ () 函数 传递 一 个 包含 HTML 标记 的 字符 串 动态 地 创建 DOM 元素。 例如， 可 以 
创建 一 个 新 的 段落 元 素 ， 如 下 所 示 : 


$ ("<p>Hi there!</p>") 
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但 是 凭空 创建 一 个 DOM 元 素 (或 者 具有 层级 的 元 素 ) 用 处 不 大 。 通 常 在 按照 这 种 方式 创建 有 层 1 
级 的 元 素 之 后 ， 会 接着 应 用 jQuery 的 DOM 操作 函数 。 下 面 探 讨 代码 清单 1-1 中 的 示例 。 


代码 清单 1-1 动态 创建 HTML 元 素 
<html> 
<head> 
<title>Follow me!</title> 
<link rel="stylesheet" type="text/css" 


href="../styles/core.css"/> 
<script type="text/javascript" src="../scripts/jquery-1.4.js"> 
</script> ， 
<script type="text/Javascript"»> 在 文档 就 绪 处 理 器 中 创建 
S(ftunctIion()( HTML 元 素 


$ ("<p>Hi there!</p>") .InSsertAfter (" 井 fo11owMe'" ) ; 
}); 
</script> 
</head> 


<body> 已 经 存在 的 元 素 ， 动 态 创 建 


<D id="followMe">Follow me!</p> 的 元 素 会 在 此 元 素 之 后 
</body> 


</htmil> 


这 个 示例 在 文档 主体 中 创建 了 一 个 名 为 followMe @ 的 HTML 段落 。 在 <nead> 中 的 脚本 元 
素 里 创建 了 一 个 就 绪 处 理 带 人 @ ,用 来 把 一 个 新 创建 的 段落 插入 到 DOM 树 中 那个 已 有 元 素 的 后 面 ， 
语法 如 下 : 

Ss ("xp>Hl therelx/p>") ,insertAfter("#tfollowMe"); 


结果 如 图 1-3 所 示 。 








QOO Follow mael [一 > 
ED x © http://localhost/ijqia2/chapter]l /listing-1.1.html e 
Follow me! 

Hi therel 








图 1-3 ”动态 创建 和 插入 元 素 通常 需要 多 行 代码 ， 不 过 jQuery 可 以 使 用 一 行 代码 轻松 搞定 


我 们 会 在 第 3 章 中 详细 地 考察 全 套 的 DOM 操作 函数 ,jQuery 提供 了 许多 操作 DOM 的 方式 ， 
以 创建 任何 想 要 的 HTML 结构 。 
在 学 习 了 jQuery 的 基本 语法 之 后 ， 下 面 将 学 习 jQuery 库 的 最 强大 的 一 个 功能 。 


1.3.5 ”扩展 jQuery 








jQuery 包装 带 限 数 提供 了 大 量 有 用 的 方法 ,可 以 在 页 面 上 反复 使 用 。 但 是 没有 任何 一 个 库 
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可 以 满足 用 户 的 所 有 需求 。 试 图 满足 所 有 需求 的 库 是 不 合理 的 , 这 可 能 会 导致 一 大 堆 斋 大 的 、 胱 
肿 的 、 包 含 很 少 可 用 功能 的 代码 ， 这 只 会 把 事情 搞 砸 。 

由 于 认识 到 这 个 概念 的 重要 性 ， 所 以 jQuery 开发 者 努力 提取 大 部 分 页 面 开发 者 都 需要 的 功 
能 ， 只 在 核心 库 包 含 这 些 功 能 。jQuery 的 开发 者 还 意识 到 每 个 页 面 开 发 者 都 有 个 性 化 需求 ， 因 此 
将 jQuery 设计 成 可 以 很 容易 通过 附加 功能 来 扩展 的 库 。 

可 以 编写 一 些 函 数 来 填补 任何 空白 ,但 是 一 旦 习惯 jQuery 的 代码 风格 ， 我 们 会 发 现 使 用 传 
统 的 方式 来 扩展 功能 是 超级 乏味 的 。 可 以 使 用 jQuery 提供 的 强大 功能 对 其 进行 扩展 ， 特 别 是 在 
元 素 选 择 领域 。 

下 面 看 一 个 具体 的 例子 : jQuery 没有 任何 预定 义 咕 数 来 禁用 一 组 表单 元 素 。 如 有 末 在 应 用 中 大 
量 使 用 表单 ， 就 会 发 现下 面 的 代码 非常 便利 : 

$("form#myForm input.special'") .disable(); 
筠 运 的 是 ， 通 过 扩展 在 调用 $ () 时 返回 的 包 朔 本 ，jQuery 从 设计 上 保证 了 其 方法 集 很 容易 就 得 到 
扩展 。 下 面 请 看 如 何 通 过 创建 一 个 新 的 aisabled() 函数 实现 上 述 功能 的 基本 用 法 : 

$s.fn.disable = function() { 

return this.each(function() { 

if (this.disabled [上 null) this.disabled = true; 


$3 
} 


这 里 引入 了 很 多 新 的 语法 , 但 不 要 过 于 担心 。 只 要 继续 学 习 以 下 儿 间 ,你 将 会 很 熟悉 这 些 语 
法 并 会 频繁 使 用 这 些 基 本 的 惯用 语法 。 

首先 ，$ .fn.disable 表示 使 用 disabled 方法 扩展 s 包 闻 套 。 在 图 数 内 部 ，this 关键 字 指 
向 将 要 操作 的 DOM 元 素 集 合 。 

然后 ， 通 过 调用 包 袭 希 上 的 each () 方 法 过 历 每 一 个 匹配 的 元 素 。 我 们 会 在 第 3 章 详 细 探 讨 
这 种 方法 及 其 类 似 方 法 。 在 传人 入 each () 的 友 代 天 图 数 内 ，this 是 对 当前 过 历 的 特定 DOM 元 条 
的 引用 。 不 要 被 般 父 困 数 内 this 指 癌 不 同 对 象 所 迷惑 。 多 与 一 些 扩展 函数 后 你 就 会 发 现 ，this 
指 回 当前 图 数 内 的 不 同 对 象 是 相当 目 然 的 事情 。( 附录 中 也 有 对 JavaScript 中 this 关键 字 概 念 的 
解释 。) 

检查 每 一 个 元 素 是 否 具 有 disabled 特性 ， 如 有 果 有 ， 束 把 该 特性 设 为 true。 返 回 each () 方 
法 的 执行 结果 ( 即 包 装 需 )， 从 而 使 新 创建 的 gisabled() 方 法 支持 链 式 操作 (正如 许多 jQuery 
原生 方法 那样 )。 可 以 这 样 编写 代码 : 

Ss ("formftmyForm input.special'") .disable().addClass ("moreSpecial"); 

从 页 面 代 人 码 的 角度 看 ， 新 方法 disabled() 仿 佛 内 置 在 jQuery 库 一 样 ! 这 门 技术 格外 强大 ， 
以 至 于 很 多 jQuery 新 手 在 使 用 jQuery 库 的 初期 就 能 创建 一 些小 的 扩展 了 。 

此 外 ,jQuery 的 企业 级 用 户 已 经 为 jQuery 扩展 了 多 套 有 用 的 功能 (也 被 称 为 插件 ) 我 们 会 
在 第 7 草 中 详细 介绍 这 种 扩展 jQuery 的 方法 。 
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测试 存在 性 
你 可 能 见 过 这 个 用 来 判断 一 个 项 目 是 否 存 在 的 常见 用 法 : 
if (item) { 


2 
J 


else { 


2 加 加 
| 


这 里 的 刘 辑 是 ， 如 果 item 不 存在 ， 则 条 件 表 达 式 将 等 于 false。 

尽管 这 在 大 部 分 的 情况 下 都 能 正常 工作 ,但 jQuery 的 开发 者 还 是 认为 这 过 于 宽松 和 不 严 
推荐 在 $ .fn.disable 示例 中 使 用 更 加 明确 的 测试 方法 : 

工业 《LESN nL 

这 个 表达 式 会 正确 地 测试 null 或 者 undefined 值 。 

访问 jQuery 在 线 文档 即 可 查看 jQuery 团队 推荐 的 各 种 代码 风格 的 完整 列表 : http:// 
docs.Jquery.com/JQuery Core Style Guidelines, 


在 深入 学 习 如 何 使 用 jQuery 为 页 面 增加 活力 之 前 ， 你 可 能 想 知 站 能 否 同 时 使 用 jQuery 和 
Prototype， 或 者 其 他 同样 使 用 $ 缩 略 符 的 库 。 下 一 书 会 揭示 这 个 问题 的 答案 。 


1.3.6 jQuery 与 其 他 库 共 存 


尽管 jQuery 所 提供 的 功能 强大 的 工具 集 足 以 满足 大 部 分 的 需求 ， 但 有 时 还 会 遇 到 一 种 页 面 
需要 引入 多 个 JavaScript 库 的 情况 。 这 种 情况 之 所 以 会 产生 ， 可 能 是 因为 我 们 把 一 个 使 用 了 其 他 
库 的 应 用 转换 为 使 用 jQuery 库 ， 也 可 能 是 我 们 想 在 页 面 中 同时 使 用 jQuery 和 其 他 库 。 

jQuery 开发 团队 明确 表示 ， 他 们 关注 的 是 如 何 满 足 jQuery 社区 用 户 的 需求 ， 而 非 排 挤 其 他 
库 ， 因 此 提供 了 人 允许 jQuery 和 其 他 库 共 存 的 方法 。 

首先 ,他 们 遵循 最 佳 实践 原则 ， 避 免 引 入 大 量 的 标识 符 而 污染 全 局 命名 空间 。 因 为 大 量 的 标 
识 符 不 仅 可 能 会 与 其 他 库 冲 突 ,， 也 可 能 会 与 我 们 想 在 页 面 上 使 用 的 名 字 冲 突 。 标 识 符 jQuery 和 
其 别名 $s 是 jQuery 为 全 局 命名 空间 引入 的 唯一 变量 。 在 1.3.2 市 曾 提 到 的 作为 jQuery 命名 空间 一 
部 分 而 定义 的 实用 函数 ， 就 是 出 于 这 方面 考虑 的 最 好 示例 。 

尽管 其 他 库 定 义 一 个 名 为 jQuery 的 全 局 标识 符 的 可 能 性 不 大 ,但 是 在 下 面 这 种 特殊 情况 下 ， 
jQuery 的 开发 者 出 于 方便 性 考虑 使 用 s 作 为 jQuery 的 别名 ， 却 会 币 来 厂 烦 。 其 他 JavaScript 库 
(比如 著名 的 Prototype 库 ) 出 于 自身 考虑 会 使 用 $ 名 称 。 并 且 s 名 称 是 Prototype 库 运 行 的 关键 ， 
这 就 产生 了 严重 的 冲突 。 

深思 熟 虑 的 jQuery 作者 通过 一 个 名 为 noconflict () 的 实用 函数 来 消除 这 种 冲突 。 在 引入 会 
产生 冲突 的 库 后 ， 调 用 

ee 

就 可 以 保留 $ 标 识 符 给 其 他 库 使 用 了 。 

我 们 会 在 第 7 章 详 细 阐 述 引 入 此 实用 函数 后 代码 的 细微 差别 。 


es 


3 
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1.4 ”小 结 


在 本 章 对 jQuery 的 快速 介绍 中 ， 我 们 学 习 了 许多 内 容 ， 为 深入 探索 使 用 jQuery 轻松 、 快 速 
地 开发 下 一 代 Web 应 用 程序 做 好 了 准备 。 

jQuery 通常 对 任何 逢 要 执行 操作 ( 除了 那些 微不足道 的 JavaScript 操作 ) 的 页 面 都 非常 有 用 ， 
而 且 也 高 度 关 注 如 何 帮 助 页 面 开发 者 在 页 面 中 使 用 不 唐 突 的 JavaScript。 采 用 jQuery 的 解决 方案 ， 
把 行为 从 结构 中 分 离 出 来 ， 正 如 CSS 把 样式 从 结构 中 分 离 出 来 一 样 ， 它 能 使 我 们 更 好 地 组 织 页 
面 ， 增 加 代码 的 灵活 性 。 

尽管 事实 上 ]Query 仅仅 回 JavaScript 命名 空间 引入 了 两 个 新 的 命名 ( jQuery 也 数 和 其 别 
名 $ )， 它 却 通过 使 jQuery 也 数 高 度 多 功能 化 ， 以 及 根据 传人 的 参数 调整 执行 的 操作 来 提供 大 量 
的 实用 功能 。 

jQuery () 有 如 下 用 途 : 

口 通过 包 疙 带 方 法 选择 和 包 法 将 要 操作 的 DOM 元 素 ; 

口 为 全 局 实用 也 数 提供 命名 空间 ; 

口 从 HTML 标记 创建 DOM 元 素 ; 

口 创建 在 DOM 就 绪 后 执行 的 代码 。 

jQuery 在 页 面 上 表现 出 色 ， 它 不 仅 尽 量 减少 了 对 全 局 JavaScript 命名 空间 的 占用 ， 而 且 提 供 
了 官方 方法 , 以 尽 可 能 减少 当 冲 突 依然 存在 时 对 命名 空间 的 占用 问题 , 也 就 是 当 页 面 上 男 一 个 库 
(比如 Protorype ) 也 要 求 使 用 $ 名 称 的 时 候 。jQuery 在 用 户 友好 方面 做 得 不 错 吧 ! 

接 下 来 的 几 草 ， 我 们 将 探索 jQuery 为 寞 因特网 应 用 开发 人 员 提 供 的 全 部 功能 。 下 面 即 将 开 

台 学 习 之 旅 ， 下 一 草 我 们 学 习 使 用 jQuery 选择 需 快 速 、 简 单 地 找 出 那些 需要 操作 的 元 素 。 
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选择 要 操作 的 元 素 


本 章 内 容 

口 使 用 选择 带 选 择 jQuery 需要 包装 的 元 系 
口 创建 并 放置 新 的 HTML 元 素 到 DOM 中 
口 操作 元 素 包装 集 


在 上 一 草 中 ， 我 们 讨论 了 jQuery 函数 的 多 种 用 法 ,涵盖 了 从 选择 DOM 元 系 到 定义 在 DOM 
加 载 完 毕 后 执行 的 函数 等 各 种 功能 。 

本 革 ， 我 们 将 通过 天 析 $ () 函数 的 两 个 最 强大 和 最 第 用 的 功能 
系 并 创建 新 的 DOM 元 素 ， 来 介绍 如 何 取得 要 操作 的 元 素 。 

交互 式 Web 应 用 的 许多 功能 邵 是 通过 对 组 成 页 面 的 DOM 元 系 进 行 操 作 来 实现 的 。 但 在 操作 
这 些 元 素 之 前 ， 我 们 首先 需要 找到 并 选择 它们 。 下 面 开 始 探索 之 旅 ， 学 习 使 用 jQuery 选择 目标 
元 系 的 各 种 方法 。 


2.1 选择 将 被 操作 的 元 素 


在 使 用 jQuery 的 任何 方法 〈 第 被 称 为 jQuery 包装 器 方法 ) 时 ， 首 先 要 做 的 是 选择 页 面 中 要 
操作 的 那些 元 系 。 有 时， 想 要 选择 的 元 系 集 是 很 容易 描述 的 ， 比 如 “页 面 上 的 所 有 上 段 洲 元 床 ”。 
有 了 时， 需要 对 它们 进行 比较 复杂 的 描述 ， 比 如 “所 有 CSS 类 名 为 listElement、 包 含 一 个 链接 
的 列表 元 素 ， 并 且 是 列表 中 的 第 一 个 元 素 ”。 
对 好 jQuery 所 提供 的 选择 器 语法 十 分 通用 ， 可 以 让 我 们 优雅 而 精确 地 描述 所 需 选 择 的 元 素 
集 。 你 可 能 已 经 知道 很 多 这 样 的 语法 : jQuery 使 用 你 已 经 熟悉 和 喜爱 的 CSS 语法 ， 并 经 过 扩展 
提供 了 一 些 自 定 义 语法 ,来 帮助 完成 复杂 而 又 和 常见 的 选择 操作 。 
og 为 了 帮助 你 学 习 元 紊 选择， 我 们 在 本 书 的 示例 代码 中 包含 了 jQuery 选择 带 实 验 室 页 面 ( 即 
公 chapter2/lab.selectors.html )。 它 允许 你 输入 一 个 jQuery 选择 需 字 符 串 ， 然 后 (实时 地 ) 观察 哪些 
DOM 元 素 被 选中 。 实 验 室 页 面 显示 的 结果 如 图 2-1 所 示 (如 果 面 板 排列 不 整齐 ， 你 可 能 需要 调 
整 浏览 硕 窗 口 的 大 小 ) 














使 用 选择 器 选择 DOM 元 









































图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 





16 “第 2 章 选择 要 操作 的 元 素 


BOO jQuery Selectors Lab Page =) 


WA Coogle | 


了 {7 
CC -0 http://localhost/jqia2/chapter2 /lab,selectors.html 








jQuery Selectors Lab Page 





Type a selector into the text field below and press | Some images: 

the Apply button, wi NT 了 pp 
wa, 一 

Selector: a l ry 

| 2 二 | 淆 仿 


This is a <div> with an id of someDiv 


Apply | | Hello 
| Goodbye 


0 
° CSS1 
° C552 
° CSS3 
5 Basic XPath 
e jQuery also supports 
© Custom selectors 
2 Form selectors 


Language Type Invented 

Java Static 1995 

Ruby Dynamic 1993 

Smalltalk Dynamic 1972 

C++ Static 1983 

Text: 

Radio group: OQ A 人 人 BOC 

Checkboxes: 口 1 口 2 思 3 口 4 
Submit 





' z 


<div><label>Some images:</label></div> 








图 2-1 jQuery 选择 表 实 验 室 页 面 允 许 实时 观察 任何 指定 选择 天 的 行 ， 


提示 00000000000000000000000000000000000000 


UDUOUDOUDOUDUDUUUUOUOUODUUOUUUUUUDU UU http:/www.manning.com/ 
bibeault2[] 


图 2-1 中 左上 角 的 Selector 面板 包含 一 个 文本 输入 框 和 一 个 按钮 。 在 输入 框 中 输入 选择 天 字 
符 串 并 单 击 Apply 按钮 ， 试 验 一 下 选择 需 实 验 室 页 面 。 例 如 ， 在 文本 框 中 输入 字符 串 11， 然 后 
单 击 Apply 按钮 。 

输入 的 选择 器 ( 本 例 中 是 1i ) 将 应 用 到 页 面 右上 角 DOM Sample 面板 中 的 那 部 分 HTML 代 
人 码 上 。, 单 击 Apply 按钮 , 实验 室 代 人 码 会 立即 执行 , 将 所 有 匹配 的 元 系 洪 加 类 名 wrappedElement。 
在 页 面 上 定义 的 CSS 规则 确保 所 有 应 用 此 类 的 元 素 都 高 亮 显 示 ， 边 框 变 为 红色 ， 背 景色 变 为 粉 
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红色 。 单 击 Apply 后 ， 效 果 将 与 图 2-2 显示 的 一 样 ，DOM 示例 中 所 有 <1i> 元 又 都 高 亮 显 示 。 
四 口 口 jQuery Selectors Lab Page 二 中 


(NI -0 http://localhost/jqia2/chapter2 /lab.selectors.html QCooge 】 






jQuery Selectors Lab Page 


| Type a selector into the text field below and press Some images: 


the Apply button. 


Selector: 
li 








This is 8 <div> with an jd of SOomeDiv 
Apply | Hello 


jQuery statement: 
$("1i").addCclass( "wrappedslement" ); 


8 matching element 
执行 的 jQue 


LI 


口 _Y 匹 配 的 元 素 
Y sa Language Type Invented 


Java Static 1995 
Ruby Dynamic 1993 
smalltalk Dynamic 1972 
C++ 十 Static 1983 
Text: 

Radio group: = 
Checkboxes: 门 
Submit 














<div><label>Some images:</label></div> 


图 2-2 ”选择 名 1i 会 匹配 所 有 的 <11> 元 系 ， 应 用 后 的 显示 结 末 如 图 所 示 


意 ， 示 例 中 所 有 的 <1i1> 元 素 都 已 经 高 完 显 示 ， 执 行 的 jQuery 表达 式 以 及 匹配 元 素 的 标签 
了 选择 问 输 入 框 的 下 面 。 
用 来 生成 DOM 示例 片段 的 HTML 标记 ， 显 示 在 下 面 的 DOM Sample Code 的 面板 中 。 这 可 
以 帮助 你 验证 针对 DOM 示例 中 的 目标 元 素 而 写 的 选择 硕 。 
随 着 本 章 内 容 的 推进 ， ag 此 实验 室 页 面 。 但 是 首先 ， 作 为 本 书 的 作者 ， 
必须 承认 我 有 意 人 简化 了 一 个 重要 的 概念 ， 会 纠正 这 个 问题 。 


2.1.1 控制 上 下 文 
目前 为 止 , 我 们 都 假设 传递 给 jQuery 的 $ () 函数 的 参数 只 有 一 个 , 但 这 仅仅 是 为 了 在 开始 的 
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时 候 尽 量 保 持 简 单 。 事 实 上 ， 这 个 果 数 在 接受 选择 需 或 者 HTML 代码 作为 第 一 个 参数 时 ， 也 接 
受 了 第 二 个 参数 。 如 有 果 第 一 个 参数 是 选择 需 ， 那 么 第 二 个 参数 则 指示 该 操作 的 上 下 文 。 

我 们 将 在 许多 jQuery 方法 中 看 到 ， 当 一 个 可 选 的 参数 被 忽略 时 ， 就 会 被 一 个 默认 的 参数 所 
蔡 代 。 上 下 文 参数 context 也 是 同样 的 道理 。 选 择 需 作为 第 一 个 参数 传递 时 〈 后 面 会 讨论 传递 
HTML 代码 的 情况 )， 默 认 把 DOM 树 的 所 有 元 素 作 为 该 选择 器 的 上 下 文 。 

通常 这 正 是 我 们 所 需要 的 , 因此 这 是 一 个 不 错 的 默认 值 ,但 是 , 有 时 我 们 只 想 搜索 整个 DOM 
树 的 一 个 子 集 。 在 这 种 情况 下 ， 需 要 指出 DOM 树 的 子 集 作 为 选择 带 应 用 的 根 节 点 。 

选择 天 实验 室 页面 为 这 种 场景 提供 了 一 个 很 好 的 示例 。 你 输入 到 文本 框 中 的 选择 硕 ， 只 会 应 
用 到 DOM Sample 面板 加 载 的 那些 DOM 树 的 子 集 上 。 

上 下 文 参数 可 以 是 DOM 元 系 的 引用 ， 也 可 以 是 包含 jQuery 选择 融 的 字符 串 ， 或 者 是 DOM 
元 系 包 装 集 。( 也 就 是 说 ,我 们 可 以 把 调用 某 个 $ () 函数 的 结果 传递 给 为 一 个 $ () 函数 一 一 仔细 想 
一 想 ， 这 点 儿 逻 辑 应 该 不 难 理解 。) 

当选 择 需 或 包装 集 作 为 上 下 文 参数 时 , 选 定 的 元 素 就 成 为 了 选择 需 ( 第 一 个 参数 ) 的 上 下 文 。 
我 们 可 以 通过 标识 多 个 这 样 的 元 系 ， 来 优雅 地 指定 各 种 作为 选择 需 上 下 文 的 DOM 子 树 。 

以 实验 室 页 面 为 例 , 假定 选择 带 字 符 串 保存 在 名 为 selector 的 变量 中 ,应 用 选择 需 时 ,我 
们 只 想 把 上 下 文 限制 在 示例 的 DOM 树 上 ， 也 就 是 ia 值 为 sampleDOM 的 <dQiv> 元 系 内 。 

如 果 我 们 像 下 面 这 样 调用 jQuery 函数 : 

$s (selector) 

则 选择 融会 应 用 到 整个 DOM 树 上 ， 包 含 输入 选择 需 的 表单 目 身 。 这 不 是 我 们 想 要 的 结 采 。 我 们 
想 把 选择 的 范围 限制 在 DOM 树 的 子 树 内 ， 该 子 树 的 根 是 ia 值 为 sampleDOM 的 <qiv> 元 系 。 
此 要 这 样 写 : 

Ss (selector, 'div#sampleDOM') 

这 样 就 可 以 把 选择 各 的 应 用 范围 限制 在 DOM 树 中 指定 的 部 分 。 

好 了 ,我们 已 经 知道 了 如 何 控 制 选择 各 应 用 的 上 下 文 克 围 ,， 下面 就 从 熟悉 的 领域 一 一 传统 的 

CSS 选择 希 开 始 ， 学 习 如 何 进行 编 但 。 






































2.1.2 ”使 用 基本 CSS 选 择 器 


由 于 要 经 稼 给 页 面 元 素 应 用 样式 ,因此 Web 开发 人 员 早 已 熟悉 了 几 种 选择 表达 式 , 这 些 表 达 
式 蝇 大 而 实用 ， 并 且 可 以 在 所 有 浏览 锅 下 和 运行。 这些 表达 式 通过 元 素 的 ID 、CSS 类 名 、 标 签名 
以 及 页 面 中 元 素 的 DOM 层级 关系 选择 元 素 。 

表 2-1 提供 的 一 些 例子 可 以 帮 你 快速 复习 以 前 的 知识 .可 以 组 合 使 用 这 些 基 本 的 选择 天 类 型 ， 
来 识别 那些 需要 精确 匹配 的 元 系 集 。 

表 2-1 一 些 简单 的 CSS 选择 器 示例 


示 例 描 述 
| 匹配 所 有 的 链接 元 素 (<a>) 
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( 续 ) 
示 例 朱 述 
站 SEEecTalID 匹配 id 为 specialID 的 元 素 
.SpecialClass 匹配 拥有 CSS 类 specialclass 的 元 素 
a#specialID.specialClass [匹配 id 为 specialID 并 有 日 拥有 CSS 类 specialclass 的 链接 元 素 
Dapecialclass 匹配 拥有 CSS 类 specialclass 的 链接 元 素 并 且 这 个 元 素 是 <p> 的 子 节 点 


有 了 jQuery， 我们 就 可 以 使 用 驾轻就熟 的 CSS 选择 器 来 轻松 地 选择 元 素 了 。 使 用 jQuery 选 
择 元 素 ， 只 需 将 选择 句 传 递 给 s$ () 困 数 ， 就 像 下 面 这 样 : 

S$S("p a.specialClass") 

除了 极 少数 例外 ，jQuery 完全 兼容 CSS3 标准 ， 因 此 按照 这 种 方式 选择 元 条 更 容易 被 大 多 灶 
人 所 接受 。 遵 循 标准 的 浏览 需 通 过 样式 表 能 够 选中 的 元 素 ,， 用 jQuery 选择 需 引 擎 也 能 选中 。 注 
意 ，jQuery 不 依赖 于 它 所 在 浏览 器 的 CSS 实现 。 即 使 浏览 硕 没 有 正确 地 实现 标准 CSS 选择 需 ， 
jQuery 也 会 遵循 W3C 标准 的 规则 来 正确 地 选择 元 素 。 

jQuery 也 允许 我 们 使 用 逗号 操作 符 将 多 个 选择 絮 合 并 成 一 个 选择 右 。 例 如 ， 要 选择 所 有 的 
<div> 和 所 有 <span> 元 系 ， 可 以 这 么 做 : 

$('div,span') 

A 现在 可 以 做 一 些 练习 ， 打 开 选 择 需 实验 室 页 面 ， 输 入 一 些 基 本 的 CSS 选择 需 试 验 一 下 ， 直 

到 你 觉得 得 心 应 手 为 止 。 

这 些 基本 的 选择 震 是 强大 的 , 但 有 时 我 们 需要 更 加 精确 地 控制 需要 匹配 的 元 素 。jQuery 勇于 
迎接 挑战 ， 提 供 了 更 高 级 的 选择 融 。 


2.1.3 ”使 用 子 市 点 、 容 器 和 特性 选择 器 


对 于 更 高 级 的 选择 需 ，jQuery 也 可 以 使 用 Mozilla Firefox、IE7/8、Safari、Chrome 和 其 他 现 
代 浏 览 志 都 文 持 的 最 新 CSS 实现 。 这些 高 级 选择 磊 人 允许 我 们 选择 元 系 的 直接 子 方 点 , 在 DOM 中 
位 于 其 他 元 素 后 面 的 元 素 ， 甚 至 其 特性 匹配 一 定 条 件 的 元 素 。 

有 时 ,我 们 只 想 选 择 某 个 元 系 的 直接 子 节 点 。 比 如 ， 只 选择 某 个 列表 的 直接 列表 元 素 ， 而 不 
包含 子 列 表 中 的 列表 元 素 。 考 感 以 下 出 目 选择 需 实 验 室 页 面 中 示例 DOM 的 HTML 代码 : 


<ul class="myList"> 
<]i><a href="http://jJgquery.com">jQuery supports</a> 
<ul> 
<l1i><a href="css1l">CSS1</a></1i> 
<1i><a href="css2">CSS2</a></1i> 
<l1i><a href="css3">CSS3</a></1i> 
<l]i>Basic XPath</1i> 
</ul> 
</11i> 
<]i>jQuery also supports 
<ul> 
<l]i>Custom selectors</1i> 




















一 
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<l1i>Form selectors</1i> 
</ul> 
</11i> 
</ul> 


假设 我 们 想 要 选择 远程 jQuery 站 点 的 链接 ， 而 不 是 描述 不 同 CSS 规范 的 各 种 指向 本 地 页 面 
的 链接 。 使 用 基本 CSS 选择 右 ， 我 们 会 尝试 这 样 写 ul.myList 1i a。 然 而 ， 这 个 选择 需 会 选 
取 所 有 的 链接 ， 因 为 它们 都 是 源 自 于 同一 个 列表 元 素 。 

你 可 以 在 选择 硕 实验 室 页面 输 入 ul.myList 1i a， 单 击 Apply 来 对 此 进行 验证 。 绪 采 如 
图 2-3 所 示 。 


BOO jQuery Selectors Lab Page | 


\ 


MR EE © http:/ /localhost/jqia2 /chapter2 /lab.selectors.html 






汪汪 
jQuery Selectors Lab Page 


Type a selector into the text field below and press Some images: 
the Apply button. 、 





Selector: 
ul.myList lia 


This is a <div> with an jd of someDiv 


| Apply | Hello 


Goodbye 
jQuery statement: 
${"ul.myList 11i 
a").addclass( wrappedE lement" )} 


4 matching elements: 
°° Basic XPath 
es jQuery also supports 
5s Custom selectors 
5 Form selectors 





图 2-3 ul.myList 1i a 可 以 选中 所 有 销 点 标记 ,虽然 它们 所 处 的 层次 不 同 ,但 都 
是 <11> 元 聚 的 子 节 点 


更 高 级 的 方法 是 使 用 子 节 点 选择 器 ,其 中 父 市 点 和 它 的 直接 子 市 点 通过 右 尖 括号 (> ) 隔 开 ， 
如 下 所 示 : 

SS 
此 选择 需 只 会 匹配 是 <p> 元 系 的 直接 子 记 点 的 链接 。 如 果 链 接 通 人 层次 更 深 ， 比 如 位 于 <p> 里 面 
的 <span> 丰 点 内 ， 那 就 不 会 被 选中 。 

回 到 示例 上 来 ， 考虑 如 下 选择 硕 : 

i 

此 选择 带 只 会 选择 是 列表 元 素 百 接 子 节点 的 链接 , 并 且 这 个 列表 项 是 拥有 CSS 类 myList 的 
<ul> 元 素 的 直接 子 市 点 。 排 除 包含 在 子 列表 中 的 链接 ， 因 为 子 列表 项 <1i> 的 父 记 点 <ul> 元 系 并 
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不 带 有 CSS 类 myList， 结 果 如 图 2-4 所 示 。 


BOO jQuery Selectors Lab Page 三 ;| 
GG 3 http://localhost/jqiaz/chapter2/lab.selectors.html dQ-Cooge 





jQuery Selectors Lab Page 人 | 


| 











Type a selector into the text field below and press 
the Apply button. 


Selector: 
ul.myList > li > a 





This is a <div> with an id of someDiv 


| Apply pply J Hello 


7 


jQuery statement: 
$("ul.myList > 1i > 
a").addCclase( wrappedElement" ); 


1 matching element: o CSS3 
5 Basic XPath 


图 2-4 ul.myList > 1i > aa 选择 带 只 会 匹配 父 节 点 的 百 接 子 节点 


特性 选择 器 也 非 党 强大。 假设 我 们 想 要 为 外 部 链接 添加 一 个 特殊 的 行为 。 再 次 看 下 之 前 探讨 
过 的 实验 室 页 面 示 例 的 代码 片段 : 
<1i><a href="http://jquery.com">jQuery supports</a> 


<ul> 
<li><a href="css1l">CSS1</a></1i> 


<l11i><a href="css2">CSS2</a></11i> 
<l11i><a href="css3">CSS3</a></11i> 
<l]i>Basic XPath</1i> 
</ul> 
</1i> 


外 部 链接 的 nref 特性 值 都 是 以 http: // 开 头 的 字符 串 ， 这 使 其 与 众 不 同 。 我 们 可 以 通过 下 
面 的 选择 从 来 匹配 那些 href 特性 值 以 http:// 开头 的 链接 : 

ahreft^='httPp:// 

这 会 匹配 href 特性 值 以 http:// 开头 的 所 有 链接 元 系 。 插 入 符 〈(^) 用 来 指定 匹配 字符 串 
开头 的 字符 。 这 也 是 大 部 分 正则 表达 式 处 理 天 使 用 的 字符 ， 表 示 匹 配 候选 字符 串 开 头 的 字符 , 记 
住 这 个 用 法 应 该 很 容易 。 

再 次 访问 实验 室 页 面 (之 前 的 HTML 代码 就 摘 目 该 实验 室 )， 在 文本 框 中 输入 
liref "snes "|]s 然后 单 击 Apply。 注意 只 有 一 个 jQuery 的 链接 高 亮 显示 。 

还 有 其 他 使 用 特性 选择 种 的 方式 。 匹 配 某 个 元 系 是 否 拥有 某 个 特性 ， 而 不 论 该 特性 的 值 是 什 
么 ,我 们 可 以 这 样 使 用 : 











图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 





2 第 2 章 选择 要 操作 的 元 素 


form[method ] 


这 会 匹配 拥有 method 特性 的 所 有 <form> 元 又。 


匹配 指定 的 特性 值 ， 使 用 如 下 语句 : 


input [type='text'] 


这 个 选择 器 会 匹配 type 特性 值 为 text 的 所 有 <:input> 元 素 。 





我 们 已 经 看 到 如 何 “ 匹 配 特 性 值 开头 部 分 ”的 选择 带 。 


div[title^='my'] 





下 面 是 另 一 个 例子 : 


它 选 择 title 特性 值 以 my 开头 的 所 有 <dqiv> 元 素 。 


对 于 “匹配 特性 值 结尾 部 分 ”的 选择 融 ， 


a[lhrefs$=' .pdf'] 
这 是 一 个 有 用 的 选择 硕 ， 








该 有 怎 么 做 呢 ? 下 面 就 是 : 


用 来 定位 所 有 指向 PDF 文件 的 链接 。 





还 有 一 个 选择 各 ， 可 以 查找 特性 值 包含 任意 指定 字符 串 的 元 系 : 


a[lhref*='jquery.com’'] 





正如 所 料 ， 这 个 选择 带 匹 配 指 向 jQuery 站 点 的 所 有 <a> 元 系 。 
表 2-2 显示 了 可 以 在 jQuery 中 使 用 的 基本 CSS 选择 需 。 


表 2-2 jQuery 支持 的 基础 CSS 选择 器 









































选 择 器 

匹配 所 有 元 素 

E 匹配 标签 名 为 E 的 所 有 元 素 
EE 民 匹配 标签 名 为 F 的 所 有 元 素 ， 
E>F 匹配 标签 名 为 F 的 所 有 元 素 ， 
E+F 匹配 标签 名 为 F 的 所 有 元 素 ， 
E~F 匹配 标签 名 为 F 的 所 有 元 素 ， 
二 和 匹配 标签 名 为 E 的 所 有 元 素 ， 
下 # 工 匹配 标签 名 为 E 的 所 有 元 素 ， 
E[LA] 匹配 标签 名 为 EE 的 所 有 元 素 ， 
已 [A=V] 匹配 标签 名 为 EE 的 所 有 元 素 ， 
E[A^=V] 匹配 标签 名 为 EE 的 所 有 元 素 ， 
EL[AS$=V] 匹配 标签 名 为 EE 的 所 有 元 素 ， 
E[A!=V] 匹配 标签 名 为 EE 的 所 有 元 素 ， 
BLA*=V] 匹配 标签 名 为 王 的 所 有 元 素 ， 





闪 


你 需要 组 合 使 用 选择 器 来 完成 这 个 任务 ”) 








描 述 

这 些 元 素 是 王 的 子 节点 

这 些 元 素 是 的 直接 子 节点 

这 些 元 素 是 王后 面 的 第 一 个 兄弟 节点 

这 些 元 素 是 王后 面 的 兄弟 节点 之 一 

这 些 元 素 拥有 CSS 类 名 为 Cc， 如 果 省 略 王 则 相当 于 * .C 


这 些 元 素 的 id 特性 值 为 I， 如 条 省 略 王 则 相当 于 *# 工 
这 些 元 素 拥 有 特性 A 

这 些 元 素 的 A 特性 值 为 V 

这 些 元 素 的 A 特性 值 以 Y 开头 

这 些 元 素 的 A 特性 值 以 V 结束 

这 些 元 素 的 A 特性 值 不 等 于 V， 或 者 根本 就 不 存在 A 特性 
这 些 元 素 的 A 特性 值 包含 V 








掌握 了 这 些 知识 后 ， 回 到 选择 器 实验 室 页 面 ， 多 花 一 些 时 间 来 练习 表 2-2 中 列 出 的 各 种 类 型 
的 选择 器 。 试 着 有 针对 性 地 选择 元 素 , 比如 选择 包含 文本 Hello 或 Goodbye 的 <span> 元 素 ( 提示 : 





: div[title='myTitlel'] span,div[ltitle='myTitle2'] spano 
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到 目前 为 止 , 我们 对 选择 名 的 强大 功能 探讨 的 还 不 够 ， 其 实 还 有 更 多 的 选项 ,可 以 更 加 出 色 
地 幕 选 页 面 元 系 。 





2.1.4 通过 位 置 选择 元 率 


有 时 ， 需 要 根据 元 系 在 页 面 上 的 位 置 ， 或 者 相对 于 其 他 元 素 的 位 置 来 选择 元 素 。 可 能 要 选择 
页 面 中 的 第 一 个 链接 、 隔 行 段 沙 ， 或 者 每 个 列表 中 的 最 后 一 个 列表 项 。jQuery 文 持 实 现 这 些 特殊 
的 选择 机 制 。 

比如 下 面 这 个 选择 太 : 

a:first 
这 种 格式 的 选择 融会 匹配 页 面 上 的 第 一 个 <a> 元 和 又。 

那么 如 何 获取 隔行 元 系 呢 ? 




















D:odqd 
这 个 选择 天 会 匹配 所 有 奇数 的 段落 元 素 。 当 然 ,我 们 也 可 以 通过 下 面 的 代码 匹配 偶数 的 段 洛 元 系 : 
p:even 


还 有 一 种 选择 硕 : 

ul li:last-child 

选择 父 元 又 的 最 后 一 个 子 和 上 点。 在 本 例 中 , 匹配 的 是 每 一 个 <uL> 元 系 的 最 后 一 个 <11> 子 节点 。 

这 样 的 选择 希 有 很 多 ， 有 些 通过 CSS 定义 ， 有 些 是 jQuery 所 特有 的 ， 它 们 为 一 些 难题 提供 
了 令 人 尺 叹 的 优雅 解决 方案 。CSS 规范 将 这 种 类 型 的 选择 带 称 为 伪 类 (pseudo-classes ), 但 jQuery 
赋予 了 它 新 的 名 字 一 一 过 滤器 ,因为 这 些 选择 需 是 用 来 过 滤 另 外 一 个 基础 选择 希 的 。 这 些 过 滤 关 
非常 容易 识别 ， 因 为 它们 都 以 冒号 ( : ) 开头 。 记 住 ， 如 果 你 省 略 了 基础 选择 磊 ， 它 就 默认 为 *。 

表 2-3 列 出 了 这 些 位 置 过 小 人 般 〈 在 jQuery 文档 中 称 为 基础 和 子 节 点 过 涯 角 )。 


表 2-3 jQuery 支持 的 位 置 过 滤 选 择 器 


























选 择 器 描 述 

:first 匹配 上 下 文中 的 第 一 个 元 素 。1i a:first 返回 列表 项 后 代 市 点 中 的 第 一 个 链接 

:last 匹配 上 下 文中 的 最 后 一 个 元 素 。11 a:1last 返回 列表 项 后 代 市 点 中 的 最 后 一 个 链接 

:first=ehild 匹配 上 下 文中 的 第 一 个 子 市 点 。1i:first-child 返回 每 个 列表 中 的 第 一 个 列表 项 

:last=child 匹配 上 下 文中 的 最 后 一 个 子 市 点 ,1i:last-chilgd 返回 每 个 列表 中 的 最 后 一 个 列表 项 

onLly=ehnlld 返回 所 有 没有 兄弟 节点 的 元 素 

mth -child(n) 匹配 上 下 文中 的 第 nn 个子 布点 。1i:nth-child(2) 返回 每 个 列表 中 的 第 二 个 列表 项 

nth-chila(even|caa) 匹配 上 下 文中 的 偶数 或 奇数 子 市 点 。1i:nth-child (even) 返回 每 个 列表 中 的 偶 
数列 表 项 

mtn=ehild (XntY) 匹配 上 下 文中 的 由 提供 的 公式 计算 出 的 子 市 点 。 如 果 Y 是 0， 则 可 以 省 略 。 
li:nth-child(3n) 返 回 每 个 列表 中 能 被 3 整除 的 列表 项 ， 而 nth-child(5n+1) 
返回 每 个 列表 中 所 有 能 被 5 整除 的 列表 项 的 下 一 个 列表 项 

:even 匹配 上 下 文中 的 偶数 元 素 。1i:even 返回 所 有 偶数 的 列表 项 
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〈 绥 ) 
选 择 器 朱 述 
:0dd 匹配 上 下 文中 的 奇数 元 素 。1i :094 返回 所 有 奇数 的 列表 项 
:eq (n) 匹配 第 n 个 元 素 
"gt 匹配 第 n 个 元 素 之 后 的 元 素 (不 包含 第 nn 个 元 素 ) 
LE 匹配 第 n 个 元 素 之 前 的 元 素 (不 包含 第 nn 个 元 素 ) 








这 里 有 一 个 快捷 技巧 ( 总 会 有 一 些 的 ， 对 吧 ? )。 :nth-child 过 滤 瘟 从 1 开始 计数 (为 了 
与 CSS 脱 容 )， 而 其 他 的 选择 表 都 是 从 0 开始 计数 ( 亲 循 肖 用 的 编程 约定 )。 可 能 刚 开 始 这 会 让 
人 有 点 困 灵 ， 不 过 多 加 练习 后 你 束 会 习惯 。 


我 们 再 次 入 研究 一 下 。 
考虑 如 下 来 日 于 实验 室 示例 DOM 的 表格 代码 。 它 包含 了 几 种 编程 语言 以 及 这 些 语言 的 基本 


信息 








< 上 able id="l]anguages"> 
<thead> 
< 七 工 > 
<th>Language</th> 
<th>Type</th> 
<th>Invented</th> 
</tr> 
</thead> 
<tbody> 
< 七 工 > 
<td>Java</td> 
<td>Static</td> 
<td>1995</td> 
</tr> 
< 七 工 > 
< 七 Q>RUlby< /七 Q> 
<td>Dynamic</td> 
<td>1993</td> 
</tr> 
< 七 工 > 
<td>Ssmalltalk</td> 
<td>Dynamic</td> 
<td>1972</td> 
</tr> 
<tr> 
<td>C++</td> 
<td>Static</td> 
<td>1983</td> 
</tr> 
</tbody> 
</table> 


假如 我 们 想 获 取 表 格 中 包含 编程 语言 名 称 的 所 有 单元 格 。 因为 它们 都 是 每 一 行 的 第 一 个 单元 
格 ， 所 以 可 以 像 下 面 这 样 写 : 


table#languages td:first-child 
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也 可 以 这 么 写 : 

table#languages td:nth-child(1) 
不 过 第 一 种 语法 更 加 简洁 优雅 。 

为 了 获取 语言 类 型 的 单元 格 ， 我 们 可 以 修改 选择 器 的 过 滤 需 为 :nth-childa(2) ， 也 可 以 使 
用 :nth-child(3) 或 者 :last-child 获取 语言 发 明年 份 的 单元 格 。 如 果 只 想 获 取 表 格 的 最 后 一 
个 单元 格 (包含 文本 1983 的 单元 格 )， 可 以 使 用 td:1ast。 同 样 ，td:eq(2) 返 回 包含 文本 1995 
的 单元 格 ， 而 td:nth-child(2) 返 回 包含 编程 语言 类 型 的 所 有 单元 格 。 再 次 强调 ， 记 住 :eg 是 
从 0 开始 计数 的 ， 而 :nth-child 是 从 1 开始 计数 的 。 

在 继续 学 习 之 前 ， 回 到 选择 需 实 验 室 页 面 ， 尝 试 从 列表 中 选择 第 2 项 和 第 4 项 ”"。 然 后 尝试 
找到 3 种 不 同 的 方法 ， 选 择 表格 中 包含 文本 1972 的 单元 格 ?。 此 外 ， 试 着 感受 :nth-chila 过 滤 
融 与 绝对 定位 选择 需 之 间 的 差异 ”。 

立 管 目前 为 止 我 们 学 到 的 CSS 选择 需 非 常 强大 ， 但 还 有 更 强大 的 jQuery 选择 右 等 待 我 们 去 


























2.1.5 使 用 CSS 和 目 定 义 的 jQuery 过 滤 选 择 需 


CSS 选择 六 赋 子 了 我 们 强大 的 能 力 以 及 灵活 性 来 匹配 所 需 的 DOM 元 系 ,， 不 过 还 有 一 
售 可 以 用 来 更 进一步 过 滤 选 择 项 。 

例如 ， 当 我 们 想 选 择 所 有 处 于 选中 状态 的 复 选 框 。 你 可 能 会 和 尝试 以 下 代码 : 

$s('input[type=checkbox] [checked]') 
但 是 ,通过 特性 ( checkeqd ) 匹配 只 能 检查 控件 在 HTML 标记 中 声明 的 控件 初始 状态 ”"。 而 我 们 
真正 想 要 检查 的 是 控件 的 实时 状态 。CSS 提供 了 伪 类 : checked,， 用 来 匹配 处 于 选中 状态 的 元 素 。 
比如 尽管 7 选择 侣 选择 的 是 所 有 <input> 元 素 5 但 是 input:checked 能 够 将 搜索 苑 围 纳 
小 到 只 处 于 选中 状态 的 <input> 元 素 。 

这 似乎 还 不 够 ，jQuery 还 提供 了 许多 强大 的 、 不 是 通过 CSS 指定 的 目 定义 过 泪 选 择 大 ， 可 
以 更 方便 地 标识 目标 元 素 。 比 如 ， 自 定义 的 :checkbox 选择 器 用 来 识别 所 有 的 复 选 框 元 素 。 这 
些 日 十 义 选 择 需 组 合 起 来 将 EFE 常 强大 ， 思考 下 :checkbox:checked 和 :radio:checked 所 能 选 
择 的 元 素 。 

前 面 曾 经 讨论 过 ， jQuery 在 文 持 CSS 过 小 选择 从 的 同时 还 定义 了 很 多 日 定义 选择 条 。 表 2-4 
列 出 了 这 些 选 择 伪 。 





[ 医 
3 
项 











OO 参考 答案 : 1i:nth-child(2n)。 

@) 参考 答案 : tbody tr:eq(2) td:eq(2)、td:contains('1972')、tbody td:nth-child(3) :eq(2)。 

G@) tbody td:nth-child(1) 返 回 Java、Ruby、Smalltalk、C++ 这 4 个 单元 格 ， 而 tbody ta:eq(1) 仅 仅 返回 摘 
述 Java 语言 特性 的 Static 单元 格 。 

由 这 里 的 描述 是 正确 的 ， 但 是 如 果 你 在 实验 室 页 面 测试 这 个 选择 器 ， 会 发 现 它 能 匹配 到 动态 更 新 状态 的 复 选 框 。 这 
其 实 是 jQuery 1.4.2 的 一 个 BUG ， 我 们 需要 使 用 jQuery 的 后 续 版 本 〈 比 如 1.4.4 ) 来 获得 正确 的 效果 。 
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表 2-4 CSS 和 自 定 义 过 滤器 








选 择 器 描述 CSS 支持 
:animated 选择 处 于 动画 状态 的 元 素 (第 5 音 会 介绍 动画 与 特效 ) 
:button 选择 按钮 元 素 (包括 input[type=submit]、input[type=reset]、 

input [type=button] 和 button) 

:checkbox 选择 复 选 框 元 素 (input [type=checkbox]) 
:checked 选择 处 于 选中 状态 的 复 选 框 或 单 选 按钮 元 素 Vv 
:contains (food) ”选择 包含 文本 food 的 元 素 
:disabled 选择 处 于 禁用 状态 的 元 素 V 
:enabled 选择 处 于 启用 状态 的 元 素 Vv 
:file 选择 文件 输入 元 素 (input [type=file]) 
:has (selector) 选择 至 少 包含 一 个 匹配 指定 选择 颖 的 元 素 的 元 素 
:header 选择 标题 元 素 。 比 如 <h1> 到 <h6> 
‘hidden 选择 隐 刀 元素 
:image 选择 图 片 输 入 元 素 (input [type=image]) 
: input 选择 表单 元 素 (input、select、 textarea、button) 
:not (selector) ”选择 不 匹配 指定 选择 器 的 元 素 ; 
:parent 选择 有 子 节 点 (包含 文本 ) 的 元 素 ”， 空 元 素 除 外 
:password 选择 口令 元 素 (input [type=password]) 
:radio 选择 单 选 框 元 素 (input [type=radio]) 
:reset 选择 重 置 按 钮 元 素 (input [type=reset] 或 者 button[type=reset]) 
:Selected 选择 列表 中 处 于 选中 状态 的 <option> 元 素 
:submit 选择 提交 按钮 元 素 (input [type=submit] 或 者 button[type=submit]) 
‘et 选择 文本 输入 框 元 素 (input [type=text] ) 
= 选择 可 见 的 元 素 





很 多 CSS 和 目 定 义 的 jQuery 过 滤 选 择 带 是 与 表单 相关 的 ， 人 允许 优雅 地 指定 特定 元 素 类 型 或 
状态 。 我 们 也 可 以 组 合 过 滤 选 择 需 。 比 如 , 如 果 想 只 选择 那些 同时 处 于 启用 和 选中 状态 的 复 选 框 ， 
可 以 使 用 : 

:checkbox:checked:enabled 


闪 在 选择 希 实 验 室 页 面 尽 可 能 多 答 试 使 用 这 些 过 滤 带 , 直到 你 党 得 目 己 能 够 很 好 地 掌握 它们 的 
用 法 。 








这 些 过 滤 带 对 于 选择 带 集 合 来 说 是 非常 有 益 的 补充 ， 然 而 反 转 这 些 过 滤 带 又 会 怎样 呢 ? 
1. 使 用 :not 过 滤器 
如 果 想 对 选择 器 取 反 ， 假 设 要 匹配 所 有 不 是 复 选 框 的 <input> 元 素 ， 可 以 使 用 :not 过 滤器 。 


@) :parent 是 选择 器 :empty 的 取 反 。 
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例如 ， 选 择 非 复 选 框 的 <input> 元 素 ， 可 以 使 用 : 

input:not(:checkbox) 
但 是 要 小 心 ! 这 很 容易 使 你 误 入 歧途 并 且 会 得 到 意料 之 外 的 结果 ! 

比如 , 假设 我 们 想 选 择 所 有 的 图 乒 , 但 是 要 排除 src 特性 值 包含 dog 文本 的 图 片 。 我们 可 以 
快速 地 构造 出 下 面 的 选择 天 : 

Ss("snot(inmnmlsre*="dog"].)") 

但 是 如 来 使 用 了 这 个 选择 益 , 就 会 发 现 不 仅 选 择 了 所 有 src 特性 值 不 包含 dog 的 图 斤 , 而 且 也 选 
择 了 DOM 中 所 有 不 是 图 乒 的 元 素 ! 

以 呀 ! 想起 来 了 ， 如 采 省 略 了 基础 选择 带 ， 它 默认 就 是 *， 因 此 我 们 这 个 错误 的 选择 硕 的 意 
思 是 “获取 所 有 元 素 ， 排 除 那 些 src 特性 值 包含 dog 的 图 三 元 素 ”。 我 们 真正 想 要 的 是 “获取 所 
有 图 片 元 素 ， 排 除 那 些 src 特性 包含 dog 的 图 片 "， 正 确 的 表达 式 是 下 面 这 样 . 

Samnmnot( Lere = TAGr |) ") 

A 再 次 强调 下 ,使 用 实验 室 页 面 多 做 练习 ， 直 到 你 熟练 使 用 :not 过 滤器 来 反 转 选择 名 。 
jQuery 还 添加 了 一 个 目 定义 过 滤 和 硕 ， 用 来 帮助 我 们 通过 元 素 的 父子 关系 来 选择 元 系 。 


























警告 DOD00000 jQuery 1.2000000:not00 :has(ODOOOOOOOOODOOODODO 
UDDOUDODOUDOOOUDOOOUU0OUU0OUU0UUUNUU UD youery1.3000 
UUDUDU 


2. 使 用 :has 过 滤器 

如 前 所 述 ，CSS 定义 了 一 个 有 用 的 选择 锅 , 用 来 选择 特定 父 和 点 的 子 节 点 。 比 如 下 面 这 个 选 
择 冀 : 

div span 

会 选择 <div> 元 系 子 方 点 中 所 有 的 <span> 元 系 。 

但 是 如 末 想 要 取 反 呢 ? 如 采 想 选择 包含 <span> 元 系 的 所 有 <div> 元 系 ， 该 怎么 办 呢 ? 

这 就 是 :has () 过 滤 硕 的 职责 所 在 。 考 虑 如 下 选择 规 : 

div:has (span) 

它 会 选择 <div> 人 祖先 元 系 ， 而 不 是 <span> 子 孙 元 系 。 

当 我 们 想 要 选择 结构 复杂 的 元 素 时 ， 这 会 是 一 个 强大 的 处 理 机 制 。 比 如 ， 假 设 我 们 想 要 找 出 
包含 某 种 图 片 元 素 的 表格 行 ,这 种 图 片 元 素 可 以 使 用 src 特性 来 唯一 标识 。 可 以 使 用 如 下 选择 硕 ， 

tenes(in ler = eymne ly ”) 

这 会 返回 在 子 节 点 层次 结构 中 包含 已 标识 图 片 的 任何 表格 行 元 素 。 

可 以 肯定 的 是 ， 在 以 后 将 要 探讨 的 代码 中 ， 这 个 过 滤 硕 和 其 他 的 jQuery 过 滤 硕 会 共同 扮演 
重要 角色 。 

如 前 所 述 ，jQuery 提供 了 庞大 的 工具 集 用 来 选择 页 面 的 现 有 元 系 ， 以 便 使 用 jQuery 方法 来 
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进行 操作 , 我 们 会 在 第 3 章 中 对 此 进行 详细 讨论 。 在 学 习 这 些 操作 方法 之 前 ， 先 来 看 下 如 何 使 用 
s () 国 数 来 创建 新 的 HTML 元 素 。 


2.2 创建 新 的 HTML 


有 时 ， 我 们 需要 生成 新 的 HTML 代码 以 插入 到 页 面 中 。 这 些 动态 创建 的 元 系 可 能 很 简单 ， 








据 生 成 表格 。 

有 了 jQuery， 创建 动态 元 素 就 是 小 荣 一 耕 ， 和 我 们 在 第 1 章 中 介绍 的 一 样 ， 因 为 8 () 函数 除 
了 能 够 选择 页 面 中 的 现 有 元 素 ， 还 可 以 从 HTML 字符 串 创建 元 素 。 考 虑 以 下 代码 : 

Ss("<div>Hello</div>") 

这 个 表达 式 创 建 了 一 个 要 添加 到 页 面 中 的 新 的 <qaiv> 元 素 。 可 以 在 由 页 面 现 有 元 素 组 成 的 包 
闭 集 上 运行 任何 jQuery 方法， 也 可 以 在 新 创建 的 HTML 片段 上 运行 。 初 看 起 来 这 似乎 并 不 吸 
引 人 ， 但 是 当 把 事件 处 理 程序 、Ajax 以 及 特效 揉 合 在 一 起 综合 考虑 ( 我 们 将 在 接 下 来 的 几 章 中 
学 习 )， 你 就 会 发 现 这 非常 方便 。 

注意 ， 如 果 想 创建 一 个 空白 <aiv> 元 素 ， 就 可 以 使 用 下 面 这 样 的 快捷 方式 : 

$ ("<div>") 

这 与 $("<div></div>") 和 s$ ("<div/>") 是 等 价 的 , 不 过 我 建议 使 用 符合 标准 的 标记 ， 这 些 
标记 将 对 任何 可 以 包含 其 他 元 系 的 元 系 类 型 书写 完整 的 开始 和 结束 标签 。 

创建 这 种 简单 的 HTML 元 素 非常 容易 ， 利 用 jQuery 方法 的 链 式 操 作 ， 创 建 更 复杂 的 元 系 也 
不 会 太 难 。 我 们 可 以 将 任何 jQuery 方法 应 用 到 包含 新 创建 元 系 的 包装 集 。 比 如 ， 我 们 可 以 通过 
css () 方 法 为 元 系 应 用 样式 ， 也 可 以 通过 attz1() 方 法 为 元 系 创 建 特性 ， 不 过 jQuery 提供 了 更 好 
的 方法 来 完成 这 一 任务 。 

我 们 可 以 传递 第 二 个 参数 到 创建 元 素 的 $ () 方 法 中 ， 用 来 指定 特性 以 及 特性 值 。 这 个 参数 是 
一 个 JavaScript 对 象 ， 它 的 属性 作为 特性 的 名 称 和 值 来 应 用 到 元 素 上 。 

假设 我 们 想 创建 一 个 拥有 很 多 特性 的 图 片 元 素 , 它 拥 有 某 种 样式 ,另外 还 要 让 它 啊 应 单 击 事 
件 。 参 见 代 码 清单 2-1 中 的 代码 。 


代码 清单 2-1 动态 创建 一 个 全 功能 的 <img> 元 系 


$('x«img>", < 和 @ 创建 基本 的 <img> 元 素 












































title:'I woof in your general direction', 
click: function()t 
alert (S$ (this) .attr('title')); 


src: 'images/little.bear.png', 
alt: 'Little Bear', @ 设置 各 种 特性 


设置 单 击 事件 处 理 函 数 
} 

}) 

-Gest < 一 和 3 为 图 片 添加 样式 


CUTSOT : 'Pointer', 
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border: '1lpx solid black', 
padding: '12px 12px 20px 12px', 
backgroundColor: 'white' 
}) 9 将 此 元 素 添加 到 页 面 中 


.appendTo('body'); 





代码 清单 2-1 的 jQuery 单行 表达 式 首 先 创 建 一 个 基本 的 <img> 元 素 人 @,， 赋 了 它 一 些 重要 的 特 
性 ， 比 如 图 片 来 源 、 替 换文 字 、 悬 停 文 字 @， 人 然后 添加 样式 使 其 看 起 来 像 打印 出 来 的 照片 @, 最 
后 把 它 附加 到 DOM 树 中 人 @。 

我 们 也 在 代码 中 玩 了 点 花样 ， 使 用 attribute 对 象 创 建 了 一 个 事件 处 理 函 数 ， 用 来 弹出 对 
话 框 ( 显示 图 片 的 提示 文字 ) 以 响应 图 片 的 单 击 事件 合 。 

jQuery 不 仅 可 以 在 attribute 参数 中 指定 特性 ， 而 且 可 以 为 所 有 类 型 的 事件 创建 处 理 函 数 
(我 们 会 在 第 4 半 中 深入 讨论 )， 还 可 以 辣 少 数 jQuery 方法 传递 值 ， 这 些 方法 的 目的 是 为 了 设置 
元 素 各 个 方面 的 参数 。 虽然 我 们 还 没有 学 习 这 些 方法 , 不 过 可 以 先 为 以 下 方法 指定 值 (在 下 一 章 
中 会 讨论 大 部 分 方法 ): val、 css、 html、 text、 data、 width.、 height 内 友 GfFaet, 

因此 ， 在 代码 清单 2-1 中 ， 我 们 可 以 省 略 对 链 式 方法 css () 的 调用 ， 用 attribute 参数 中 
对 象 的 属性 来 代 蔡 ， 如 下 所 示 : 


CSS: { 








CUTSOT : 'pPointer', 

border: '1lpx solid black', 
padding: '12px 12px 20px 12px', 
backgroundColor: 'white' 


} 
不 管 我 们 如 何 重 构 代码 , 它 看 起 来 还 是 有 点 笨重 (为 了 方便 阅读 ,我 们 分 多 行 来 显示 代码 ,并且 
进行 了 逻辑 缩 进 )， 不 过 它 的 确实 现 了 很 多 功能 。 这 样 的 语句 在 使 用 jQuery 的 页 面 中 会 很 常见 ， 
如 果 你 觉 着 有 点 不 知 所 措 ， 不 用 担心 ， 接 下 来 的 几 章 会 介绍 这 个 语句 的 每 一 个 方法 。 不久, 你 将 
会 习惯 编写 这 样 的 复合 语句 了 。 

图 2-5 显示 了 这 段 代 码 的 执行 结果 ,包括 页 面 首次 加 载 完 毕 后 的 效果 (参见 图 2-5a ) 和 单 击 
图 片 后 的 效果 ( 参见 图 2-5b )。 


@OoO New Image Example SS 
ey ( | | http://localhost/jqia2/chapter2 /listing-2.1.html EIQ Coogle ) 




















图 2-5a 动态 创建 复杂 的 元 素 ， 包 括 这 张 单 击 后 会 弹出 对 话 框 的 图 片 ， 简 直 易 如 反 掌 
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昌 OO New Image Example OO 
g > ps | | npn y 
(9 x , © http://localhost/jqiaz2/chapter2/listing-2.1.html 加 Qr Coogle | 








Sa 一 一 一 一 一 一 -一 一 -一 一 | 











Ca The page at http:/ /localhost says: 


“ N fl 1woof in your general direction 


二 





ih 


图 2-5b ”动态 创建 的 图 片 拥 有 所 有 需要 的 样式 和 特性 ， 包 括 为 响应 鼠标 单 击 行为 
而 弹出 的 对 话 框 


本 例 的 完整 代码 可 以 从 本 书 的 项 目 代 码 中 找到 : chapter2/listing-2.1.html。 

到 目前 为 止 ， 我 们 已 经 将 包 沪 帮 方 法 应 用 到 了 整个 包 污 集 上 ， 这 些 包 浅 集 是 通过 问 jQuery 
为 数 传递 选择 需 来 创建 的 。 但 有 时 候 在 应 用 包装 需 方 法 之 前 , 我 们 可 能 想 对 包装 集 进行 更 进一步 
的 操作 。 


2.3 管理 包装 集 


一 旦 获取 了 一 个 包 效 集 ， 不 管 是 通过 选择 天 从 现 有 的 DOM 元 系 中 识别 的 元 杂 ， 还 是 通过 
HTML 片段 创建 的 新 元 素 〈 或 者 两 者 组 合 )， 都 可 以 使 用 强大 的 jQuery 方法 集 对 其 进行 操作 。 
我 们 会 在 下 一 曹 讨论 这 些 方法 。 但 是 如 果 想 进一步 精简 由 jQuery 函数 创建 的 包装 集 ， 该 怎么 办 
呢 ? 本 节 中 ， 我 们 会 探索 很 多 这 样 的 方法 ， 用 来 提取 、 扩 展 或 者 获取 包 交 集 的 子 集 ， 以 便 对 其 
进行 操作 。 

为 了 帮助 你 学 习 这 方面 内 容 , 本 草 的 项 目 代 码 还 包含 了 男 一 个 实验 室 页 面 : jQuery 操作 实验 
室 页 面 (chapter2/lab.operations.html )。 这 个 页 面 和 本 章 前 面 介 绍 的 选择 各 实验 室 页 面 很 相似 ， 如 
图 2-6 所 示 。 

这 个 新 的 实验 室 页面 不 仅 看 起 来 像 选 择 需 实验 室 页 面 ， 而 且 操作 方式 也 很 类 似 。 不 过 , 在 这 
个 页 面 中 ， 不 能 输入 选择 需 ， 而 是 要 输入 能 生成 包装 集 的 完整 jQuery 操作 代码 。 这 个 操作 会 在 
DOM Sample 的 上 下 文中 执行 ， 并 旦 像 选择 各 实验 室 页 面 那样 显示 操作 结果 。 

从 某 种 意义 上 说 ,jQuery 操作 实验 室 页 面 是 选择 需 实 验 室 页 面 更 通用 版 。 后 者 只 人 允许 我 们 和 输 
和 人 单个 的 选择 需 ， 而 jQuery 操作 实验 室 页 面 允 许 输入 任何 可 以 生成 jQuery 包装 集 的 表达 式 。 由 
于 jQuery 链 的 工作 方式 ， 这 个 表达 式 可 以 包含 多 个 包装 天 方法 ， 这 使 得 此 页 面 成 为 研究 jQuery 
操作 的 强大 实验 室 。 
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BooO jQuery Operations Lab Page cm 


Qr Coogle | 








CB iO http;/ /localhost/jqia2 /chapter2 /lab,operations.html 






jQuery Operations Lab Page 











Type any jQuery expression that results in a | 
jQuery wrapped set into the text field below and | vo 本 工 
press the Execute button， ™ 2 加 “3 

= 和 全 ~ 扩 > 各 今 


Operation: 
This is 8 <div> with an id of someDiv 
Execute ] Restore | 





css3 
© Basic XPath 
® jQuery also supports 
© Custom selectors 
© Form selectors 


Language Type Invented 
Java Static 1995 
Ruby Dynamic 1993 
Smalltalk Dynamic 1972 
Lt+ Static 1983 
Text: 
Radio group: OQ A@BOAC 
Checkboxes; 口 1 口 2 加 3 口 4 
Submit 








<div><label>Some images:</label></div> 





图 2-6 jQuery 操作 实验 室 页 面 允许 我 们 实时 构建 包装 集 ， 以 便 理 解 如 何 创建 和 管理 包装 集 


注意， 你 需要 输入 正确 的 语法 ， 以 及 能 够 产生 jQuery 包 污 集 的 表达 式 。 否 则 ， 你 会 看 到 一 
些 毫 无 用 处 的 JavaScript 错误 。 

为 了 获得 更 直观 的 感受 ， 在 浏览 问 中 打开 此 页 面 并 在 操作 框 中 输入 下 面 的 代码 : 

$('img') .hide!() 


然后 单 击 Execute 按钮 。 
这 个 操作 在 DOM Sample 的 上 下 文中 执行 ,你 可 以 看 到 所 有 图 片 从 示例 页 面 上 消失 了 。 无 论 


进行 了 什么 操作 ， 你 都 可 以 通过 单 击 Restore 按钮 将 DOM Sample 恢复 到 初始 状态 。 
在 接 下 来 几 市 中 ,我 们 将 看 到 这 个 新 的 实验 室 页 面 的 作用 。 在 后 面 几 章 中 需要 测试 各 种 
jQuery 操作 的 时 候 ， 此 页 面 也 会 非常 有 用 。 
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2.3.1 确定 包装 集 的 大 小 


前 面 提 到 过 ，jQuery 包 净 元 素 集 的 运行 方式 与 数组 非常 相似 。 像 JavaScript 数组 那样 ， 这 个 
伪 数 组 有 一 个 包含 包装 元 系 个 数 的 length 属性 。 

如 有 果 想 使 用 方法 而 不 是 length 属性 ， 可 以 用 jQuery 定义 的 size () 方 法 ， 它 也 能 返回 相同 
的 信息 。 

考虑 以 下 语句 : 


S( ' 井 SOomeDIV ' ) 
.html('There are '+S('a').size()+' link(s) on this page.'); 


般 入 到 此 代码 的 jQuery 表达 式 匹 配 所 有 的 <a> 元 对， 并 使 用 size() 方 法 返回 匹配 元 系 的 个 数 。 
用 此 个 数 来 拼接 文本 字符 串 ,， 然 后 调用 html () 方 法 (我 们 会 在 下 一 革 学 习 )， 把 这 个 文本 字符 串 
设置 为 id 为 someDiv 的 元 系 的 内 容 。 

size() 方 法 的 正式 声 法 如 下 所 未 。 





方法 语法 : size 
size() 
返回 包装 集中 元 素 的 个 数 
参数 
无 
返回 值 
元 素 的 个 数 


好 了 ， 现 在 我 们 知 直 匹配 了 多 少 个 元 系 。 那 么 如 何 直 接 访 问 它们 呢 ? 


2.3.2 ”从 包装 集中 效 取 元 素 


一 般 来 说 ,一 旦 获取 了 元 素 包 装 集 ， 就 可 以 使 用 jQuery 方法 对 其 执行 某 种 操作 。 比 如 ， 调 
用 hiae () 方 法 隐藏 全 部 元 系 。 但 有 时 候 , 我 们 希望 获取 其 中 一 个 或 者 多 个 元 系 的 耳 接 3 引用， 以 
便 对 其 执行 一 些 原始 的 JavaScript 操作 。 下 面 来 看 看 jQuery 提供 了 哪些 方法 来 帮助 我 们 完成 此 
任务 。 

1. 通过 索引 获取 元 素 

因为 jQuery 允许 我 们 将 包装 集 当成 JavaScript 数 组 ， 所 以 我 们 可 以 使 用 简单 的 数组 下 标 ， 即 
通过 位 置 来 获取 包装 序列 中 的 任何 元 素 。 比 如 ， 从 页 面 上 带 有 alt 特性 的 所 有 <img> 元 素 的 包装 
集中 获取 第 一 个 元 系 ， 可 以 使 用 如 下 语句 : 

Var imgElement = S$S('img[lalt]j')[0] 


如 果 你 更 喜欢 使 用 方法 而 不 是 数组 下 标 ， 那 可 以 使 用 jQuery 定义 的 get () 方 法 。 
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泪 
注 


方法 语法 : get 
get (index) 
获取 包装 集中 的 一 个 或 全 部 匹配 元 素 。 如 果 不 指定 参数 ， 则 包装 集中 的 所 有 元 素 就 以 
JavaScript 数组 形式 返回 。 如 果 提 供 了 index 参数 ， 则 会 返回 ijndex 所 对 应 的 元 素 
参数 
index (数值 ) 需要 返回 的 单个 元 素 的 下 标 。 如 果 省 略 ， 则 整个 集合 会 以 数组 形式 返回 
返回 值 
一 个 DOM 元 素 或 DOM 元 素数 组 


代码 片段 : 

var imgElement = $('img[alt]') .get(0) 

和 前 面 使 用 了 数组 下 标的 示例 是 等 价 的 。 

A A eh eo 区 集 的 末尾 开始 查找 元 
素 。 比 如 ，.get(-1) 返 回 包 闻 集中 的 最 后 一 个 元 素 ，.get(-2) 返 回 倒 数 第 二 个 元 素 ， 依 此 
类 推 。 

除了 获取 单个 元 素 ，get () 还 可 以 返回 一 个 数组 。 

虽然 我 们 推荐 使 用 toArray () 方 法 (下 节 将 会 讨论 ) 获取 包装 集中 元 素 的 Javascript 数组 ， 
但 get () 方 法 也 可 以 用 来 获取 由 所 有 包装 元 又 组 成 的 普通 JavaScript 数组 。 

上 述 获 取 数 组 的 方式 是 为 了 同 后 兼容 jQuery 以 前 的 版 本 。 

get () 方 法 返回 的 是 一 个 DOM 元 系 , 然而 有 时 候 我 们 希望 得 到 的 是 包含 指定 元 条 的 包装 集 ， 
而 不 是 元 素 本 身 。 下 面 的 代码 看 起 来 有 点 奇怪 : 

SI edet(23)) 


因此 ，jQuery 提供 了 ea() 方 法 ， 用 来 模仿 :eq 过 滤 需 的 行为 。 





























站 eq 
eq (index) 
获取 包装 集中 与 index 参数 相对 应 的 元 素 ， 并 返回 只 包含 此 元 素 的 新 包装 集 
参数 
lndex (数值) 需要 返回 的 单个 元 素 的 下 标 。 和 get () 方法 一 样 ， 负 的 下 标 值 可 以 指定 从 
集合 的 末尾 开始 查找 元 素 





获取 包 闻 集中 第 一 个 元 系 的 操作 是 很 稼 见 的 ， 因 此 有 更 便捷 的 方法 来 简化 这 个 操作 ， 即 
first() 方 法 。 
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方法 语法 : first 


first() 
获取 包装 集中 的 第 一 个 元 素 ， 并 返回 只 包含 此 元 素 的 新 包装 集 。 如 果 原 包装 集 为 空 , 则 返回 空 


包含 一 个 或 零 个 元 素 的 包装 集 








如 你 所 料 ， 有 对 应 的 方法 来 获取 包装 集中 的 最 后 一 个 元 系 。 





方法 语法 : last 
last() 
获取 包装 集中 的 最 后 一 个 元 素 ， 并 返回 只 包含 此 元 素 的 新 包装 集 。 如 果 原 包装 集 为 空 , 则 返回 
空 包装 集 


参数 

2 

返回 值 

包含 一 个 或 零 个 元 素 的 包装 集 





现在 来 探讨 下 获取 由 包 疙 集 元 系 组 成 的 数组 的 推荐 方法 。 

2. 以 数组 形式 获取 所 有 元 素 

如 果 你 想 以 一 个 DOM 元 系 的 JavaScript 数组 的 形式 来 获取 包装 集 里 的 所 有 元 系 ， 那么 可 以 
使 用 jQuery 提供 的 toArray () 方 法 。 





历 ;去 二 法 : toArray 


toArray () 
将 包装 集 里 的 所 有 元 素 作 为 DOM 元 素数 组 返回 


由 包装 集中 的 DOM 元 素 组 成 的 JavaScript 数组 


考虑 下 面 这 个 例子 : 
Var allLabeledButtons = S$('label+button') .toArray().; 


这 条 语句 会 收集 页 面 上 <1label> 元 素 后 面 同 级 节点 的 所 有 <button> 元 素 ， 将 它们 封装 成 
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jQuery 包 玫 从 ， 然后 创建 由 这 些 <putton> 元 素 组 成 的 JavaScript 数组 ， 将 其 赋值 给 allLabeled- 


Buttons 变量 。 


3. 获取 元 素 的 索引 
get () 通 过 给 定 下 标 来 查找 元 又 我们 还 可 以 使 用 它 的 逆 操 作 indqex() ， 来 获取 包装 集中 特 
定 元 素 的 下 标 。index() 方 法 的 语法 如 下 所 示 。 











方法 语法 : indqex 
index (element) 
在 包装 集中 查找 传 入 的 元 素 ， 返 回 它 在 包装 集中 的 下 标 ， 或 者 返回 包装 集中 的 第 一 个 元 素 在 
同 级 节点 中 的 下 标 。 如 果 没 有 找到 此 元 素 ， 则 返回 -1 
参数 
element (元 素 | 选择 器 ) 需要 获取 下 标的 元 素 引 用 ， 或 者 用 来 识别 元 素 的 选择 器 。 如 果 省 
略 此 参数 ， 则 找 出 包装 集中 的 第 一 个 元 素 在 同 级 节点 中 的 下 标 
返回 值 
传 入 的 元 素 在 包 靖 集 或 者 在 其 同 级 节点 中 的 下 标 ， 若 找 不 到 则 返回 -1 


假 疫 由 于 某 些 原因 ， 我 们 想 要 知道 id 为 fingMe 的 图 片 在 整个 页 面 图 片 集合 中 的 下 标号 。 
可 以 通过 下 面 语 句 来 获取 这 个 值 : 











var n= $('img').index(Ss('img#findMe')[0]); 
也 可 以 简写 为 : 
var n= $('img').index('img#findMe').; 











index() 方 法 也 可 以 用 来 查找 一 个 元 素 在 其 父 节 点 里 的 下 标 值 (也 就 是 在 其 同 级 节点 中 的 位 
置 )。 比 如 : 

var n = §('img').index(); 
这 会 将 nm 设置 为 第 一 个 <img> 元 素 在 其 父 方 点 里 的 下 标号 。 

现在 ， 如 何 来 调整 包装 元 素 集 而 不 是 获取 元 素 的 直接 引用 或 者 它们 的 下 标 呢 ? 


2.3.3 分解 元 素 包 装 集 


-日 获 得 了 一 个 元 系 包 汉 集 , 你 可 能 想 回 其 中 添加 元 素来 扩充 包 痛 集 ， 或 者 将 包 净 集 缩减 到 
由 原始 匹配 元 系 组 成 的 子 集 。jQuery 提供 了 一 整 侄 管 理 包 汤 集 的 方法 。 首 和 完 来 看 下 如 何 深 加 元 素 
到 包 汤 集 。 
1. 添加 更 多 元 素 到 包产 集 
我 们 经 钊 需要 添加 更 多 的 元 系 到 现 有 的 包 委 集 。 当 我 们 对 原始 包 委 集 应 用 了 一 些 方法 后 , 再 
试图 回 其 中 活 加 更 多 的 元 素 时 ， 这 个 功能 极其 有 用 。 记 住 ,， jQuery 链 可 以 在 单个 表达 式 中 执行 大 
量 任务 。 
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我 们 蕊 上 就 会 看 到 此 类 场景 下 的 一 些 具 体 示例 , 不 过 先 从 简单 的 情况 开始 。 假 设想 要 匹配 再 
有 alt 或 title 特性 的 所 有 <img> 元 素 。 强 大 的 jQuery 选择 各 人 允许 使 用 单个 选择 如 完成 这 一 任 
务 ， 例 如 : 

$s('img[lalt],img[ltitlel]') 
但 为 了 说 明 ada () 方 法 的 操作 ， 我 们 通过 下 面 的 语句 来 匹配 相同 的 集合 : 

s('img[lalt]').add('img[title]') 
以 这 种 方式 调用 aqda () 方 法 ,可 以 将 多 个 选择 需 链 接 起 来 , 创建 满足 任何 一 个 选择 硕 的 元 素 组 合 。 

在 jQuery 方法 链 里 ， 类 似 aqa () 的 方法 也 是 非常 重要 的 (并且 比 聚合 选择 带 ! 更 灵活 )， 因 
为 它们 没有 扩充 原始 的 包装 集 ， 而 是 创建 一 个 新 的 包装 集 来 保存 结果 。 我 们 很 快 就 会 看 到 当 
add () 方 法 和 其 他 方法 [比如 用 来 “收回 ”对 包装 集 扩 充 操 作 的 ena() 方 法 (参见 2.3.6 市 ) ] 一 起 
使 用 时 ， 它 是 如 何 发 挥 强 大 作用 的 。 

下 面 是 aaa () 方 法 的 语法 。 

















万 法 语法 : adada 

add (expression,context) 

创建 包装 集 的 副本 并 向 其 中 添加 由 expression 参数 指定 的 元 素 。expression 可 以 是 选择 

器 、HTML 片段 、DOM 元 素 或 DOM 元 素数 组 

参数 

expression (选择 器 | 元 素 |3 0 该 参数 如 果 是 jQuery 选择 
器 ， 则 将 全 部 匹配 的 元 素 添加 到 包装 集中 。 如 果 该 参数 是 HTML 片段 ， 则 创 
人 集中 。 如 果 参 数 是 DOM 元 素 或 DOM 元 素数 组 ， 
则 直接 将 其 添加 到 包装 集中 

context ( 选择 器 | 元 素 | 数组 |jQuery ) 指定 一 个 上 下 文 ， 用 来 缩小 匹配 第 一 个 参数 的 元 
素 的 查找 范围 。 这 和 传递 到 jQuery () 函数 中 的 上 下 文 参 数 是 一 样 的 。2.1.1 节 
中 有 对 该 参数 的 详细 描述 

返回 值 

所 添加 元 素 的 原始 包装 集 副本 


在 浏览 锅 中 打开 jQuery 操作 实验 室 页 面 ， 输 入 以 下 表达 式 : 
$s('img[lalt]').add('img[titlel]') 
然后 单 击 Execute 按钮 。 这 会 执行 上 面 的 jQuery 操作 , 选中 拥有 alt 或 title 特性 的 所 有 图 片 。 
检查 DOM Sample 的 HTML 源 代 码 ， 可 以 发 现 所 有 花 东 图 片 都 拥有 alt 特性 ， 小 狗 图 片 拥 
有 title 特性 ， 而 咖啡 壶 图 片 两 个 特性 都 没有 。 因 此 ， 应 该 料 到 除了 咖啡 壶 图 片 外 其 他 图 片 元 
素 都 将 成 为 包装 集 的 一 员 。 图 2-7 展示 了 显示 结果 的 屏幕 截图 。 

















山 在 2.1.2 中 有 介绍 ， 通 过 去 号 操作 符 将 多 个 选择 融合 并 成 一 个 选择 需 。 
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可 以 看 到 ，6 张 图 片 中 的 5 张 〈 除 咖啡 谈 图 片 以 外 ) 添加 到 包 痿 集中。 由 于 本 书 的 印刷 版 里 
图 像 是 灰 度 图 ,因此 其 中 红色 的 轮廓 线 可 能 不 太 清 晰 , 不 过 如 果 你 已 经 下 载 了 示例 代码 (你 应 该 
己 经 下 载 了 ) 并 且 跟 痢 示 例 代 码 来 学 习 〈 这 是 推荐 的 学 习 方 式 )， 就 可 以 清楚 地 看 到 了 。 


OO jQuery Operations Lab Page 到 证 











-yy 
LeN 3 hp://localhost/jqia2/chapter2 /lab,operations.html 





jQuery Operations Lab Page 








Type any jQuery expression that results in a Some images: 


jQuery wrapped set into the text field below and ead 7 
press the Execute button， Mr 
Operation: ee EE 


Simafal' addtimaftitiej ) This isa <div> with an id of 


| Execute | Restore | 


5 matching elements: 


IMG#hibiscus 
IMG#verbena 


CSS3 
IMG#ftigerLily © Basic XPath 
IMG#|IittleBear ® jQuery also supports 
IMG#cozmo D Custom selectors 





© Form selectors 


| Language Type Invented 
Java Static 1995 
Ruby Dynamic 1993 

| Smalltalk Dynamic 1972 
C++ Static 1983 
Text: 
Radio group: OQ A A 
Checkboxes: [| 1 [| 
Submit 


P 一 一 
DoMSsampliecode 


<div><label>Some images:</label></div> 








图 2-7 不 出 所 料 ，jQuery 表达 式 匹配 了 拥有 alt 或 title 特性 的 图 片 元 素 


接 下 来 看 看 aqdq () 方 法 更 实际 的 一 个 应 用 。, 假设 想 对 所 有 拥有 alt 特性 的 <img> 元 素 应 用 粗 
边框 ,然后 对 所 有 拥有 alt 或 title 特性 的 <img> 元 素 应 用 一 定 程度 的 透明 效 末 。 而 这 回 ，CSS 
选择 器 中 的 逗号 操作 符 (，) 却 无 能 为 力 ， 因 为 我 们 要 把 操作 应 用 到 包装 集 ， 然 后 添加 更 多 的 元 
系 到 该 包装 集中 , 之 后 再 应 用 另 一 个 操作 。 可 以 使 用 多 条 语句 轻松 完成 这 一 任务 , 但 利用 jQuery 
链 的 强大 能 力 ， 我 们 就 可 以 高 效 且 优雅 地 在 单个 语句 中 完成 这 一 任务 ， 如 下 所 示 : 


S| 
.addClass ('thickBorder') 
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.add('img[title]') 
.addClass('seeThrough') 


在 这 个 语句 中 , 我 们 首先 创建 了 一 个 由 拥有 alt 特性 的 所 有 <img> 元 素 组 成 的 包装 集 , 然后 
应 用 预定 义 CSS 类 thickBorder 实现 粗 边 框 ， 添 加 带 有 title 特性 的 <img> 元 素 ， 最 后 对 新 扩 
充 的 包装 集 应 用 CSS 类 seeThroush 实现 透明 效果 。 

把 这 条 语句 输入 到 jQuery 操作 实验 室 页 面 (已 经 预定 义 了 要 引用 的 CSS 类 )， 结 果 如 图 2-8 
所 示 。 




















Some images: 














图 2-8 通过 jQuery 链 ， 在 一 条 单个 语句 中 完成 复杂 操作 的 结 


可 以 看 到 ， 在 这 些 结果 中 花茶 图 片 (拥有 alt 特性 ) 有 粗 边 框 ， 而 除 咖 啡 索 ( 即 没有 alt 
又 没有 title 特性 的 图 片 ) 之 外 的 其 他 所 有 图 乒 都 褪色 了 , 这 是 因为 应 用 了 CSS 的 透明 度 规 则 。 

只 要 给 定 元 素 的 直接 引用 , 也 可 以 使 用 aaa() 方 法 来 将 这 些 元 素 添 加 到 现 有 包装 集中 。 把 元 
系 引 用 或 者 由 元 素 引 用 组 成 的 数组 传递 给 aqd () 方 法 , 就 可 以 将 这 些 元 系 添 加 到 包装 集 。 如 果 已 
经 有 一 个 变量 名 为 someElement 的 元 系 引 用 ， 则 可 以 将 它 添加 到 市 有 alt 特性 的 所有 图 片 包 装 
集中 : 

$s('img[lalt]') .add (someElement) 

这 似乎 还 不 够 灵活 ，aga() 方 法 不 仪 允 许 把 现 有 元 友 添 加 到 包装 集 ， 而 且 还 可 以 通过 传递 一 个 包 
含 HTML 标记 的 字符 串 来 添加 新 创建 的 元 素 。 考 虑 如 下 代码 : 

S$S('p').add('<div>Hi there!</div>') 

这 个 代码 片段 创建 文档 中 所 有 <p> 元 素 的 包装 集 ， 然 后 新 建 一 个 <aiv> 元 系 并 将 其 添加 到 该 
包装 集中 。 注 意 ， 这 么 做 只 是 把 新 创建 的 元 素 添 加 到 包装 集中 ,， 并 没有 把 此 元 素 添 加 到 DOM 树 
中 。 这 时 可 以 使 用 jQuery 的 appendTo() 方 法 (耐心 点 , 很 快 就 会 讨论 到 这 些 方法 ) 将 选中 的 元 
素 以 及 新 创建 的 HTML 添加 到 DOM 树 的 某 个 部 分 。 

调用 aqa() 扩 充 包 装 集 人 简单 而 有 力 ， 现 在 来 看 下 从 包装 集中 删除 元 系 的 jQuery 方法 。 

2. 整理 包装 集中 的 内 容 

我 们 已 经 看 到 使 用 aqd () 方 法 将 多 个 选择 需 链 接 起 来 ,从 而 扩充 包装 集 , 这 一 点 儿 也 不 困难 。 
同样 也 可 以 使 用 not () 方 法 将 多 个 选择 需 链 接 起 来 以 形成 差 集 关 系 。 这 和 前 面 介绍 的 :not 过 滤 
融 类 似 ， 但 它 可 以 采用 类 似 aada() 的 方式 ,在 jQuery 方法 链 里 的 任意 位 置 删除 包 效 集中 的 元 素 。 

假设 我 们 想 选 择 页 面 上 拥有 title 特性 的 所 有 <img> 元 素 ， 除 了 那些 title 特性 值 中 包含 
puppy 文本 的 岁 族 。 单 个 的 选择 希 就 可 以 处 理 这 种 情况 ( img[title] :not([Etitlex=puppy]) )， 
但 是 为 了 说 明 ， 我们 假装 忘记 :not () 过 滤 硕 的 存在 。 通 过 调用 not () 方 法 ， 从 包 姜 集中 删除 与 
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选择 带 相 匹配 的 元 素 ， 就 可 以 摘 述 差 集 基 系 。 要 完成 上 述 匹配 ， 可 以 这 样 写 : 

$(' img[titlel').not(' [titlLlex=Duppy] ' ) 

在 jQuery 操作 实验 室 页 面 输入 该 表达 式 ， 然 后 运行 它 。 你 将 看 到 只 有 标 色 小 狗 图 片 高 学 显 
示 。 而 黑色 小 狗 图 片 虽然 由 于 拥有 title 特性 而 存在 于 原始 的 包 竣 集中 ， 但 却 在 调用 not () 后 
伞 删除 了 ， 因 为 它 的 title 特性 包含 文本 puppy。 











BE , 志 站 法 ， not 
not (expression) 
创建 包装 集 的 副本 ， 从 中 删除 那些 与 expression 参数 值 指 定 的 标准 相 匹 配 的 元 素 
expression (选择 器 | 元 素 | 数组 | 函数 ) 指定 要 删除 的 元 素 。 如 果 该 参数 是 jQuery 选择 器 ， 
则 删除 任何 匹配 expression 的 元 素 。 如 果 传 递 的 是 元 素 或 者 元 素数 组 ， 则 
删除 包装 集中 的 这 些 元 素 
如 果 传 递 的 是 函数 ， 则 会 为 包装 集中 的 每 个 元 素 调用 此 函数 ( this 指定 当 
前 元 素 )， 并 从 包装 集中 删除 调用 的 返回 值 为 true 的 元 素 
返回 值 
不 含 已 删除 元 素 的 原始 包装 集 副 本 








可 以 癌 not () 方 法 传递 元 素 引 用 或 者 元 素数 组 引用 来 删除 单个 元 素 。 而 后 者 会 非常 有 趣 而 强 
大 ， 这 是 因为 任何 jQuery 包 痰 集 痢 可 以 作为 由 元 系 引 用 组 成 的 数组 。 

当 需 要 最 大 限度 的 灵活 性 时 , 可 以 癌 not () 传 递 一 个 函数 ,这样 就 可 以 逐个 决定 是 否 保留 此 

S$S('img') .not(function(){ return !$ (this) .hasClass('keepMe'); }) 
这 个 表达 式 会 选择 所 有 <img> 元 素 ， 然 后 删除 不 包含 CSS 类 keepMe 的 元 系 。 

当 难 以 使 用 过 滤 需 来 过 滤 包 闭 集 时 ， 可 以 通过 编写 代码 来 过 滤 包 闭 集 里 的 元 素 。 

有 了 时， 我 们 希望 传递 到 not () 中 的 函数 表达 相反 的 意思 ， 此 时 可 以 使 用 not () 的 反方 法 
filtez()， 它 以 类 似 的 方式 工作 ， 不 过 如 有 果 元 素 的 图 数 返 回 false 就 删除 该 元 条 。 

比如 ， 假 设 我 们 希望 创建 一 个 包 污 集 ， 这 个 包装 集 由 包含 数字 值 的 所 有 <td> 元 素 组 成 。 虽 
然 jQuery 选择 希 的 表达 式 非 常 强大, 但 还 是 无 法 完成 这 个 特殊 的 需求 。 在 这 种 情况 下 , filter () 
方法 就 可 以 派 上 用 场 了 ， 如 下 所 示 : 

Siried ). Tileer (teeion(l) retarn this, nnermim. matehnt/* ar }) 

这 个 表达 式 创建 一 个 由 所 有 <tq> 元 系 组 成 的 包装 集 ， 然 后 对 包装 集中 的 每 个 元 素 调 用 传递 
到 filtez() 方 法 中 的 函数 (当前 匹配 的 元 素 作 为 调用 的 this 值 ) 该 函数 使 用 正则 表达 式 来 决 
定 元 素 内 容 是 否 匹配 指定 的 模式 〈 一 个 或 多 个 整数 序列 )， 如 果 不 匹 配 则 返回 false。 过 滤 如 轿 
数 调 用 返回 false 的 任何 元 素 都 不 会 包含 在 返回 的 包装 集中 。 
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方法 语法 : filter 
filter (expression) 
创建 包装 集 的 副本 ， 并 从 中 删除 与 expression 参数 值 指定 的 标准 不 匹配 的 元 素 集合 
expression (选择 器 | 元 素 | 数组 | 函数 ) 指定 要 删除 的 元 素 。 如 果 参 数 是 jQuery 选择 器 ， 
则 删除 所 有 不 匹配 expression 的 元 素 
如 果 传 递 的 是 元 素 或 者 元 素数 组 ， 则 删除 包装 集中 除了 这 些 元 素 之 外 的 所 有 
元 素 
如 果 传 递 的 是 函数 ， 则 会 对 包 闭 集 的 每 个 元 素 分 别 调用 此 函数 〈this 指定 
当前 元 素 )， 并 从 包装 集中 删除 函数 调用 返回 值 为 false 的 元 素 
返回 值 
不 包含 已 过 滤 元 素 的 原始 包装 集 副 本 


再 次 打开 jQuery 操作 实验 室 页 面 ， 输 入 上 面 的 表达 式 并 执行 。 你 将 会 看 到 Invented 那 一 列 
的 表格 单元 里 只 有 <td> 元 素 被 选中 了 。 

在 调用 filter() 方 法 时 , 也 可 以 传人 选择 天 表达 式 。 当 以 这 种 方式 使 用 时 ，filter() 方 法 
和 相应 的 not () 方 法 的 操作 方式 相反 ， 即 删除 所 有 不 匹配 选择 硕 的 元 素 。filtet () 并 不 是 个 超 
级 强大 的 方法 ， 因 为 如 果 使 用 更 定 限 制 性 的 选择 带 ， 通 常会 更 容易 些 ,， 但 是 在 jQuery 方法 链 中 
它 却 非 党 有用。 例如， 考虑 如 下 代码 : 

("mo ') 

.addClass('seeThrough') 


( 
.filter(' [title*=dog]') 
.addClass ('thickBorder') 


这 个 链 式 语句 选择 所 有 图 片 ， 并 对 所 有 图 片 应 用 CSS 类 seeThrough， 然后 只 保留 集合 中 
title 特性 包含 dog 文本 的 图 片 元 素 ， 最 后 再 对 余下 的 图 片 元 素 应 用 男 一 个 名 为 thickBorder 
的 类 。 结 采 是 所 有 的 图 片 都 变 成 半 透 明 的 ,但 是 只 有 标 色 小 狗 图 片 用 粗 边 框图 了 起 米 。 

not () 和 filtezr() 方 法 给 了 我 们 强大 的 处 理 手段 ， 可 以 根据 任何 有 关 包 到 元 素 的 标准 来 动 
态 地 调整 元 素 包 半 集 。 还 可 以 根据 元 素 在 包 闭 集中 的 位 置 , 获得 其 子 集 。 下 面 接 者 学 习 这 些 方法 。 

3. 获取 包 效 集 的 子 集 

有 了 时 ,你 可 能 需要 通过 元 条 在 包装 集中 的 位 置 来 获取 包装 集 的 子 集 。jQuery 提供 了 slice() 方 
法 来 完成 此 任务 。 这 个 方法 创建 并 返回 由 原始 包装 集 的 任意 连续 部 分 (或 者 切片 ) 组 成 的 新 包装 集 。 

如 有 果 我 们 想 获 取 一 个 包 小 集 , 它 包 含 来 日 于 为 一 个 包装 集 的 一 个 单个 元 系 , 并 且 基 于 该 元 素 
在 原始 包装 集中 的 位 置 , 那么 就 可 以 使 用 slice () 方 法 , 通过 传递 原始 包装 集中 元 素 的 位 置 ( 从 
0 开始 计数 ) 来 创建 此 包装 集 。 

比如 ， 为 了 获取 第 3 个 元 素 ， 可 以 这 人 么 写 : 


S('*').slice(2,3).， 
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方法 语法 : slice 
slice(begin,end) 
创建 并 返回 新 包装 集 ， 此 包装 集 包含 匹配 集中 一 个 连续 的 部 分 





参数 

begin (数字 ) 在 返回 的 切片 中 第 一 个 元 素 的 位 置 ， 从 0 开始 计数 

end (数字 ) 不 包含 在 切片 中 的 第 一 个 元 素 的 位 置 "( 可 选 的 )， 或 者 说 是 切片 中 最 后 
一 个 元 素 的 下 一 个 元 素 的 位 置 ， 从 0 开始 计数 。 如 果 省 略 ， 则 切片 会 扩展 到 包 
装 集 的 最 后 一 个 元 素 

返回 值 

新 建 的 包装 集 





文 个 语句 选择 页 面 上 的 所 有 元 素 , 然后 生成 新 包装 集 , 它 包含 从 匹配 的 元 素 集 合 中 获取 的 第 
3 外 元素。 

注意 , 这 和 $ ('*') .get (2) 是 不 同 的 , 后 者 返回 包装 集中 的 第 3 个 元 素 , 而 不 是 包含 此 元 素 
的 包装 集 。 

因此 ， 下 面 这 个 语句 

S('*').slice(0,4).; 

选择 页 面 上 的 所 有 元 素 ， 然 后 创建 包含 前 4 个 元 素 的 新 包装 集 。 

要 获取 包装 集 尾 部 的 元 素 ， 使 用 下 面 这 个 语句 : 

S('*').slice(4).， 

匹配 页 面 上 的 所 有 元 素 ， 然 后 返回 一 个 不 包含 前 4 个 元 素 的 新 包装 六 集 。 

另 一 个 可 以 用 来 获取 包装 集 子 集 的 方法 是 has () 。 类 似 于 :has 过 滤器 ， 这 个 方法 测试 包装 
元 系 的 子 节 点 ， 并 使 用 这 个 测试 条 . 件 选 择 将 要 组 成 子 集 的 元 素 。 








万 法 语法 : has 
has (test) 
创建 并 返回 新 包装 集 ， 此 包装 集 只 包含 原始 包装 集中 子 节 点 匹配 test 表达 式 的 元 素 
参数 
test ( 选择 器 | 元 素 ) 要 应 用 到 饭 CO 是 要 测试 的 元 素 。 只 有 
特定 的 元 素 会 包含 在 返回 的 包装 集中 ， 这 些 元 素 至 少 包 含 一 个 匹配 选择 器 的 子 节 
点 ， 或 者 其 子 节 点 就 是 传递 的 元 素 参 数 test 


Q( 此 位 置 在 开始 位 置 ( begin ) 之 后 。 
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比如 ， 考 虑 这 行 代码 : 

snd), eet ame alt 
这 个 表达 式 会 创建 包含 所 有 <daiv> 元 素 的 包装 集 ， 然 后 创建 并 返回 包含 特定 <qaiv> 元 素 的 第 2 个 
集合 ， 这 些 <div> 元 泰 至 少 包含 一 个 带 有 alt 特性 的 <img> 元 素 。 

4. 转换 包装 集中 的 元 素 

我 们 经 常 需要 对 包装 集中 的 元 素 执行 转换 操作 。 比 如 ， 要 收集 包装 集中 每 个 元 素 的 ia 值 该 
怎么 做 ?或 者 如 何 从 表单 元 素 组 成 的 包装 集中 收集 值 , 以 便 从 中 生成 查询 字符 串 呢 ? 在 这 种 情况 
下 map () 方 法 就 派 上 用 场 了 。 




















DR 去， map 

map (callback,) 

为 包装 集中 的 每 一 个 元 素 调 用 回调 函数 ， 并 将 返回 值 收 集 到 jQuery 对 象 实例 中 

参数 

callback (函数 ) 回调 函数 ,为 包装 集中 的 每 个 元 素 调 用 该 函数 。 此 函数 接受 两 个 参数 : 
元 素 在 集合 中 的 下 标 (从 0 开始 计数 )， 以 及 元 素 本 身 。 当 前 元 素 也 被 作为 函 
数 的 上 下 文 ( this 关键 字 ) 

返回 值 

由 已 转换 值 组 成 的 包装 集 


比如 ， 下 面 的 代码 会 将 页 面 上 所 有 <div> 元 取 的 id 值 收集 到 一 个 JavaScript 数组 中 : 


var allIds = S$('div') .map (function()t 
return (this.id==undefined) ? null : this.id; 
EE 








如 果 回 调 函 数 的 某 个 调用 返回 nul1， 则 相应 的 条 目 不 会 包含 在 最 终 返 回 的 集合 

5. 换 历 包装 集中 的 元 素 

为 了 收集 元 素 的 人 或 者 按照 其 他 方式 转换 元 素 , 我 们 可 以 使 用 map () 方 法 裔 历 包装 集中 的 元 
素 , 但 是 在 许多 情况 下 需要 以 更 加 通用 的 目的 来 届 历 元 素 。 在 下 面 这些 场 合 中 , jQuery 的 each () 
方法 凸显 了 它 的 价值 。 

此 方法 的 一 个 用 例 是 ， 使 用 它 来 设置 匹配 集中 所 有 元 素 的 属性 值 。 比 如 ， 考 虑 这 段 代码 : 


Ss('img') .each (function(n)t 
this.alt='This is image['+n+'] with an id of '+this.id,; 


让 
这 个 语句 为 页 面 上 的 每 个 图 片 元 系 调 用 传人 的 因数 , 使 用 元 系 的 下 标 值 和 ia 值 修改 其 alt 
属性 。 
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泪 
注 


方法 语法 : each 

each (iterator) 

遍历 匹配 集 里 所 有 的 元 素 ， 为 每 一 个 元 素 调用 传 入 的 迁 代 函数 

参数 

iterator (函数 ) 回调 函数 ， 为 匹配 集中 的 每 个 元 素 调用 。 此 函数 接受 两 个 参数 : 元 素 
在 集合 中 的 下 标 (从 0 开始 计数 ) 以 及 元 素 本 身 。 当 前 元 素 也 被 作为 函数 的 上 
下 文 (this 引用 ) 

返回 值 


包装 集 








为 了 方便 起 见 ，each () 方 法 也 可 以 用 来 遍历 JavaScript 数组 对 和 象 甚至 单个 对 象 (不 是 后 来 介 
绍 的 拥有 很 多 实用 方法 的 对 象 " )。 考 虑 下 面 这 个 示例 : 

$([1,2,3]).each(function(){ alert (this); }); 
这 个 语句 会 为 传人 入 $s () 中 数组 的 每 个 元 系 调 用 迭代 卫 数 ， 也 数 中 的 this 指 回 单 独 的 数组 项 。 

还 没有 结束 呢 ! 利用 jQuery, 我们 可 以 根据 包装 集 元 系 相 对 于 DOM 中 其 他 元 系 的 关系 来 获 
取 子 包 疙 集 的 能 力 。 下 面 就 来 看 看 这 是 怎么 做 到 的 。 


2.3.4 ”使 用 关系 获取 包 小 集 


jQuery 允许 根据 包装 元 素 相对 于 HTML DOM 中 其 他 元 素 的 层次 关系 ， 从 现 有 集合 中 获取 新 
的 包 闭 集 。 

表 2-5 展示 了 这 些 方法 以 及 关于 它们 的 描述 。 这 些 方法 大 都 接受 一 个 可 选 的 选择 天 表达 式 参 
数 ,， 可 以 用 来 选择 要 收集 到 新 集合 中 的 元 素 。 如 宁 没 有 传人 选择 顺 参 数 , 则 会 选择 所 有 符合 条 件 
的 元 系 。 

除了 contents() 和 offsetParent () 两 个 方法 外 ,， 表 2-5 中 的 所 有 方法 都 可 以 接受 选择 带 
字符 串 参 数 ， 用 来 对 结果 进行 过 滤 。 


表 2-5 ”根据 与 HTML DOM 中 其 他 元 素 的 关系 获取 新 包装 集 的 方法 


















































方 法 描 述 

closest([selector]) 返回 由 与 传人 参数 匹配 的 单个 邻近 祖先 元 素 组 成 的 包装 集 

contents () 返回 由 每 个 元 素 的 内 容 组 成 的 包装 集 ， 包 括 文本 节点 (这 个 方法 常用 来 获取 
<iframe> 元 素 的 内 容 ) 

next ([selector]) 返回 由 每 个 包装 元 素 后 面 下 一 个 同 级 元 素 (不 包含 重复 元 素 ) 组 成 的 包装 集 


G@ 这 里 指 的 是 通过 $ () 函数 创建 的 jQuery 包装 硕 对 象 。 
@) childqren () 方 法 在 直接 子 节 点 中 查找 匹配 元 素 ， 类 似 的 find () 方 法 则 在 所 有 的 后 代 节 点 中 查找 元 素 。 
@) 这 里 的 描述 不 准确 ， 参 数 selector 是 必须 的 ， 否 则 .closest() 返 回 的 永远 是 空 的 jQuery 对 象 。 
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方 去 
nextAll([selector]) 
nextUntil([selector]) 


offsetParent ( ) 


parent([selectorl]) 


sarents( [selector] )” 


parentsUntil([selectorl]) 


prev([selectorl]) 
prevAll([selectorl]) 


prevUntil([selectorl]) 


siblings([selectorl]) 


描述 
返回 由 每 个 包装 元 素 后 面 所 有 的 同 级 元 素 组 成 的 包装 集 

返回 由 每 个 包装 元 素 后 面 所 有 的 同 级 元 素 组 成 的 包装 集 ， 直 至 遇 到 与 选择 器 相 
匹配 的 元 素 ， 但 不 包括 此 元 素 。 如 果 选 择 器 没有 匹配 任何 元 素 ， 或 者 省 略 了 选择 
器 参数 ， 则 会 选择 后 面 所 有 的 同 级 元 素 

返回 由 包装 集中 离 第 一 个 元 素 最 近 的 ， 使 用 相对 或 者 绝对 定位 的 祖先 元 素 组 成 
的 包装 集 

返回 由 每 个 包装 元 素 的 直接 父 元 素 (不 包含 重复 元 素 ) 组 成 的 包装 集 

返回 由 每 个 包装 元 素 所 有 的 祖先 元 素 (不 包含 重复 元 素 ) 组 成 的 包装 集 。 这 不 
仅 包括 直接 父 元 素 ， 还 包含 其 上 的 所 有 祖先 元 素 ， 但 是 不 包括 文档 根 节点 
返回 由 每 个 包装 元 素 所 有 的 祖先 元 素 组 成 的 包装 集 ， 直 至 遇 到 选择 器 匹配 的 元 
素 ， 但 不 包括 此 元 素 。 如 果 选 择 器 没有 匹配 到 元 素 ， 或 者 是 省 略 了 选择 器 参数 ， 
则 选择 所 有 的 祖先 元 素 

返回 由 每 个 包装 元 素 前 面 紧邻 的 同 级 元 素 (不 包含 重复 元 素 ) 组 成 的 包装 集 
返回 由 每 个 包装 元 素 前 面 所 有 的 同 级 元 素 组 成 的 包装 集 

返回 由 每 个 包装 元 素 前 面 所 有 的 同 级 元 素 组 成 的 包装 集 ， 直 至 遇 到 选择 器 匹配 
的 元 素 ， 但 不 包括 此 元 素 。 如 果 选 择 器 没有 匹配 到 元 素 ， 或 者 是 省 略 了 选择 器 参 
数 ， 则 选择 后 面 所 有 的 兄弟 元 素 

返回 由 每 个 包装 元 素 的 所 有 同 级 元 素 (不 包含 重复 元 素 ) 组 成 的 包装 集 






















































































考 原 一 个 情 隶 ， 按 钮 的 事件 处 理 函 数 〈 详 见 第 4 章 ) 触发 时 ， 处 理 带 内 部 的 this 关键 字 指 
向 按钮 元 素 。 假 设 我 们 想 找 出 此 按钮 是 在 哪个 <aiv> 元 素 块 中 定义 的 , 用 closest () 方 法 就 可 以 


轻松 搞定 : 


s(this) .closest('div') 














但 是 这 只 能 查找 最 近 的 <aiv> 祖 先 元 素 。 如 果 我 们 要 找 的 <aiv> 在 更 高 层次 的 祖先 元 素 中 该 
怎么 办 呢 ?” 没 问题 。 我 们 可 以 调整 传人 closest () 的 选择 器 参数 来 区 分 要 选择 的 元 素 : 
$s (this) .closest('div.myButtonContainer') 
现在 选中 的 是 拥有 CSS 类 myButtonContainer 的 祖先 <div> 元 于 。 
其 余 的 方法 以 类 似 的 方式 工作 。 比 如 需要 找到 一 个 拥有 特殊 title 特性 的 同 级 按钮 : 
s(this) .siblings('buttonl[ltitle="Close"]') 
这 些 方法 给 了 我 们 很 大 的 自由 度 来 根据 DOM 中 元 素 之 间 的 关系 选择 元 床 。 现 在 还 没有 结束 。 下 
面 接着 来 看 jQuery 如 何 更 进一步 地 处 理 包装 集 。 


2.3.5 ”更 多 处 理 包 装 集 的 方式 
这 一 切 似乎 还 不 够 ， jQuery 还 有 一 些 技巧 来 允许 我 们 调整 包装 对 象 的 集合 。 











Q) parents () 和 closest() 的 行为 类 似 , 不 过 有 一 些 细微 的 差别 ， 比 如 closest () 从 当前 元 素 开始 查找 ， 返回 
的 jQuery 对 象 可 能 包含 零 个 或 者 一 个 元 素 ; parents () 则 从 父 元 素 开 始 查 找 , 返回 的 jQuery 对 象 可 能 包含 零 个 、 





一 个 或 者 多 个 元 素 。 
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find () 方 法 可 以 将 包装 集中 所 有 元 素 的 后 代 全 部 搜索 一 遍 ,并 返回 包含 与 传人 的 选择 器 表达 
式 相 匹配 的 所 有 元 素 的 新 包装 集 。 例 如 ， 给 定 一 个 包装 集 变 量 wrappedset， 就 可 以 获取 另 一 个 
由 段落 中 的 所 有 引用 〈<cite> 元 素 ) 组 成 的 包装 集 ， 这 些 段 落 是 原始 包装 集中 的 后 代 元 素 。 

wrappedSet.find('p cite') 

和 很 多 其 他 的 jQuery 包装 器 方法 一 样 ， 当 在 jQuery 操作 链 中 调用 find0 方 法 时 , 它 才 会 发 挥 
真正 威力 。 














方法 语法 : find 


find(selector) 

返回 新 的 包装 集 ， 它 包含 原始 包装 集中 与 传 入 的 选择 器 表达 式 相 匹配 的 元 素 的 所 有 后 代 元 素 

参数 

selecbor (字符 串 ) 一 个 jQuery 选择 器 ， 只 有 匹配 此 选择 器 的 元 素 才 能 成 为 返回 集合 
的 一 部 分 

返回 值 

新 建 的 包装 集 














当 我 们 需要 在 jQuery 方法 链 的 中 间 将 搜索 范围 限制 在 后 代 元 素 中 时 ， 这 个 方法 会 非 浓 方便 ， 
为 我 们 不 可 能 使 用 其 他 的 上 下 文 或 者 约束 机 制 。 

本 市 要 探讨 的 最 后 一 个 方法 可 以 对 包 痰 集 进行 检查 ， 看 是 否 包 含 一 个 匹配 给 定 选择 带 的 元 
条 。 如 果 至 少 有 一 个 元 系 匹 配 选 择 带 ， 则 is () 返 回 true， 否 则 返回 false。 例 如 : 

Var hasImage = S$S('*').is('img'); 


这 个 语句 会 将 变量 nasImage 的 值 设置 为 true， 前 提 是 当前 DOM 中 包含 图 片 元 素 。 














厅 二 站 考 汪 本 


is(selector) 
确定 包装 集中 是 否 存在 与 传 入 的 选择 器 表达 式 相 匹配 的 元 素 


selector (字符 串 ) 检验 包装 集中 元 素 的 选择 器 表达 式 
返回 值 


如 果 至 少 有 一 个 元 素 与 传 入 的 选择 器 相 匹配 ， 则 返回 true， 否 则 返回 false 








这 是 jQuery 中 一 个 高 度 优化 的 快速 操作 ， 我 们 可 以 肥 不 犹豫 地 将 其 用 在 特别 关注 性 能 的 领 
域 中 。 


2.3.6 ”管理 jQuery 链 
我 们 非常 重视 一 种 能 力 ， 即 将 jQuery 包装 需 方法 链 在 一 起 使 用 ， 从 而 在 单个 语句 中 完成 多 
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个 任务 〈 我 们 会 继续 这 么 做 ， 因 为 这 意义 重大 )。 这 种 链 式 操作 的 能 力 不 仅 允许 我 们 以 简洁 的 方 
式 书写 强大 的 操作 代码 ， 而 且 也 能 提高 效率 ， 因 为 我 们 无 需 重新 计算 包装 集 就 能 癌 其 应 用 多 个 
js 

有 了 时候 生 成 的 包装 集 可 能 会 有 多 个 ， 这 取决 于 方法 链 中 使 用 的 方法 。 比 如 ,使 用 clone () 
方法 ( 详 见 第 3 章 ) 生成 一 个 新 的 包装 集 ， 它 会 创建 原始 集合 的 元 素 副 本 。 一 旦 生成 了 新 的 包装 
集 ， 就 没有 办 法 引用 原始 集合 ， 从 而 导致 构建 多 功能 的 jQuery 方法 链 的 能 力 大 大 减弱 。 

考虑 以 下 语句 : 

nf) er ereliolry Hae: 

这 个 语句 创建 了 两 个 包装 集 : 一 个 是 包含 了 DOM 中 的 所 有 <:img> 元 素 的 原始 包装 集 ， 另 一 
个 是 只 包含 那些 拥有 title 特性 元 系 的 包装 集 。( 是 的 ， 我 们 可 以 使 用 单个 选择 需 来 实现 ， 这 里 
的 目的 是 为 了 说 明 后 面 的 概念 。 想 象 一 下 在 调用 filter() 之 前 需要 在 方法 链 中 执行 的 一 些 重要 
操作 。 ) 

但 是 如 果 我 们 想 随后 应 用 一 个 方法 ， 比 如 在 对 原始 包装 集 进行 过 滤 之 后 ， 再 添加 一 个 CSS 
类 到 其 中 该 怎么 做 呢 ? 我 们 不 能 把 这 个 方法 添加 到 现 有 方法 链 的 尾部 ， 因 为 这 样 影响 的 是 拥有 
title 特性 的 图 片 ， 而 不 是 原始 包装 集中 的 图 片 。 

jQuery 为 这 种 需求 提供 了 end() 方 法 。 当 在 jQuery 链 中 使 用 这 个 方法 时 ， 它 会 “ 回 深 ” 到 
前 一 个 包装 集 并 将 其 作为 返回 值 ， 以 便 使 后 续 的 操作 能 够 应 用 到 前 一 个 包装 集 。 

分 析 以 下 代码 : 

s('img').filter('[title]') .hide().end() .addClass ('anImage'); 

filter() 方 法 返回 拥有 title 特性 的 图 片 集 , 但 是 调用 ena() 方 法 后 会 回 深 到 前 一 个 包装 
集 (包含 所 有 图 片 的 原始 集合 )， 该 包装 集 应 用 了 adqclass () 方 法 。 如 果 没 有 插入 end () 方 法 ， 
adqdclass () 方 法 就 会 应 用 到 集合 的 副本 上 。 





















































万 法 语法 : end 
end() 
在 JQuery 方法 链 中 用 来 将 当前 的 包装 集 回 滚 到 前 一 个 返回 的 包装 集 
参数 
无 
返回 值 


前 一 个 包 确 集 


这 或 许 让 人 联想 到 ， 调 用 jQuery 方法 链 时 产生 的 包 次 集 你 存在 栈 中 。 当 调用 enda ( ) 方法 时 ， 
最 顶层 (最近 产生 的 ) 的 包 净 集 从 栈 中 弹出 ， 前 一 个 包 净 集 被 公开 以 便 应 用 后 续 的 方法 。 

另 一 个 修改 包装 集 栈 的 便捷 方法 是 andself() ， 它 将 栈 顶 的 两 个 包装 集合 并 为 一 个 包 
疫 集 。 
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a ,二 二) 夫 。 andSelf 
andSelf () 
合并 方法 链 中 的 前 两 个 包装 集 
参数 
Ze 


比如 : 
(Ly 
.addClass( 


'a') 
.find('img,' 
( 1 
) 


.addClass | 
.andSelfl 
.addClass('c').， 


这 个 语句 选择 所 有 的 <div> 元 素 并 向 其 添加 CSS 类 a， 然 后 创建 一 个 由 这 些 <div> 元 素 后 代 
中 所 有 的 <img> 元 素 组 成 的 新 包装 集 ， 并 问 这 些 <img> 元 素 添 加 CSS 类 pb， 最 后 创建 第 三 个 包装 
集 ， 它 是 <aiv> 元 素 和 其 后 代 中 的 <img> 元 素 的 并 集 ， 并 癌 这 些 元 素 添 加 CSS 类 c。 

哇 ! 最 后 , <div> 元 素 拥 有 CSS 类 a 和 c, 而 这 些 元 素 后 代 中 的 <img> 元 素 拥有 CSS 类 b 和 c。 

可 以 看 到 , jQuery 提供 的 管理 包装 集 的 方法 几乎 涵盖 了 需要 对 包装 集 进行 的 任何 类 型 的 操作 。 


) 














2.4 ”小 结 








本 章 重 点 介绍 通过 jQuery 提供 的 多 种 方法 ,识别 HTML 页 面 中 元 素 ， 来 创建 和 调整 元 系 集 
合 (在 本 曹 以 及 后 面 几 章 中 称 为 包 准 集 )。 
jQuery 提供 了 通用 而 强大 的 选择 器 集合 ( 模仿 CSS 选择 天 )， 以 便 使 用 人 简洁 而 强大 的 语法 来 
识别 页 面 文档 中 的 元 系 。 这 些 选 择 带 包含 目前 大 多 数 现代 六 贤 帮 部 文 持 的 CSS3 语法 。 
jQuery 提供 的 男 一 个 重要 功能 是 ,使 用 HTML 片段 动态 地 创建 新 元 素 ， 以 便 创 建 或 扩大 包 
变 集 。 可 以 将 这 些 抓 立 的 元 系 连 同 包 效 集中 的 其 他 元 素 一 起 操作 , 最 终 诊 加 到 页 面 文档 的 茶 些 部 
中 














亲 内 


jQuery 提供 了 一 组 健壮 的 方法 用 来 调整 包装 集 , 以 提 炬 集合 的 内 容 , 可 以 在 创建 之 后 立即 应 
用 这 些 方法 , 也 可 以 中 途 在 一 组 方法 链 中 应 用 这 些 方法 。 对 现 有 包装 集 应 用 过 小 条 件 也 可 以 轻松 
地 创建 新 的 包装 集 。 

总 之 ，jQuery 提供 了 大 量 工具 来 确保 你 可 以 轻松 而 精确 地 找 出 期 望 操作 的 页 面 元 系 。 

本 章 中 ,我们 学 习 了 大 量 的 基础 知识 ， 但 不 涉及 对 页 面 上 的 DOM 元 素 的 具体 操作 。 人 懂得 了 
如 何 选 择 要 操作 的 元 素 后 ， 就 可 以 开始 使 用 强大 的 jQuery DOM 操作 方法 为 页 面 添加 活力 了 。 
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用 jQuery 为 页 面 添加 活力 





本 章 内 容 

口 获取 和 设置 元 素 特性 

口 在 元 素 上 保存 自 定 义 数据 

口 操作 元 素 的 CSS 类 名 

口 设置 DOM 元 素 的 内 容 

口 存储 和 获取 元 系 上 的 自 定 义 数据 

口 获取 和 设置 表单 元 素 的 值 

口 通过 添加 、 移 动 或 者 蔡 换 元 素来 修改 DOM 树 


还 记得 过 去 吗 ?” 幸好 这 些 日 子 已 经 定格 在 记忆 中 一 一 初出 茅 庐 的 网 页 开发 者 试图 为 页 面试 
加 一 些 华丽 将 采 却 招 来 反感 ， 比 如 走马 灯 、 闪 烁 文本 、 过 去 花哨 的 背景 图 片 〈 不 可 避 倪 的 影响 了 
页 面 中 文字 的 可 读 性 )、 烦 人 的 GIF 动画 ， 或 许 还 有 更 糟糕 的 ， 页 面 加 载 后 不 请 上 自 播 的 背景 音乐 
(它们 的 存在 只 能 测试 用 户 关 闭 训 览 套 的 速度 有 多 快 ) 

从 那 以 后 , 我 们 走 过 了 漫漫 长 路 。 如 今 , 专业 的 Web 开发 者 和 设计 者 都 更 加 理性 , 使 用 DOM 
脚本 ( 从 前 的 开发 者 可 能 称 为 动态 HTML 或 者 DHTML ) 所 赋予 的 强大 威力 来 改善 用 户 的 Web 
体验 ， 而 不 是 炫 炊 那些 恼人 的 技巧 。 

无 论 是 渐进 式 显示 内 容 、 创 建 除 HTML 基本 控件 之 外 的 输入 控件 ， 还 是 让 用 户 根据 其 喜好 
调整 页 面 ，DOM 操作 为 Web 开发 者 提供 了 很 多 功能 来 取悦 (而 不 是 惹恼 ) 用 户 。 

几乎 每 天 我 们 都 会 打开 一 些 令 人 惊叹 的 网 页 :“ 哇 ! 我 不 知道 网 页 还 可 以 做 那些 事情 !1”。 作 
为 称职 的 专业 开发 人 员 (更 不 用 说 为 了 满足 对 这 些 事情 无 限 的 好 奇 心 )， 我 们 立即 开始 查看 源 代 
人 码 ， 人 研究 他 们 是 怎么 做 到 的 。 

我 们 无 需 目 己 编写 所 有 的 脚本 , 因为 jQuery 提供 了 一 组 用 来 操作 DOM 的 健壮 工具 ,完成 这 
些 “ 蛙 !” 页 面具 需 令 人 惊叹 的 少量 代 但 。 鉴 于 前 一 章 已 经 介绍 了 通过 jQuery 选择 DOM 元 系 并 
生成 包装 集 的 各 种 方法 ， 本 章 将 介绍 如 何 利 用 jQuery 对 这 些 元 系 进行 操作 的 强大 威力 为 页 面 注 
入 活力 以 及 那些 邻 人 难忘 的 “ 哇 !” 要 素 。 


3.1 使 用 元 素 属性 与 特性 
就 DOM 元素 而 言 ,我 们 可 以 操作 的 一 些 最 基本 组 件 就 是 指定 给 这 些 元 素 的 属性 和 特性 。 这 
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些 属 性 和 特性 最 初 被 指定 给 JavaScript 的 对 象 实例 ,用 于 呈现 解析 HTML 标记 生成 的 DOM 元 素 ， 
并 且 可 以 在 脚本 控制 下 动态 地 修改 。 

完 来 明确 一 下 相关 的 术语 和 概念 。 

属性 是 JavaScript 对 象 的 内 在 性 质 , 每 个 属性 都 包含 名 称 和 值 。JavaScript 的 动态 特性 允许 我 
们 在 脚本 控制 下 创建 JavaScript 对 象 的 属性 。( 附录 对 此 概念 有 详细 描述 ， 如 果 你 对 JavaScript 不 
束 悉 可 以 参考 一 下 。) 

特性 不 是 JavaScript 的 原生 概念 ， 它 只 适用 于 DOM 元 系 。 特 性 用 于 描述 DOM 元 又 标记 中 
设 定 的 值 。 

考虑 如 下 图 厂 元 系 的 HTML 标记 : 


<img id="mylImage" src="image.gif" alt="An image" class="someClass" 
title="This is an image'"/> 


在 这 个 元 素 的 标记 中 ， 标 签名 称 是 img， 标记 中 的 1da、src、alt、class 和 title 描述 的 
是 元 素 的 特性 ， 每 个 特性 都 由 名 称 和 值 组 成 。 浏 览 需 会 该 取 并 解析 这 个 元 素 的 标记 ， 以 便 创 建 在 
DOM 中 表现 此 元 系 的 JavaScript 对 象 实例 。 特 性 被 收集 到 一 个 列表 中 ,这 个 列表 保存 在 DOM 元 
素 实 例 中 的 一 个 名 为 attributes (非常 合理 的 名 字 ) 的 属性 中 。 除 了 在 列表 中 保存 特性 ， 每 个 
DOM 对 象 还 被 赋予 了 多 个 属性 ， 包 括 一 些 描述 元 素 标记 中 特性 的 属性 。 

因此 ， 特 性 值 不 仅 在 attributes 列表 中 有 所 体现 ， 还 存在 于 少数 属性 中 。 

图 3-1 展示 了 关于 这 个 过 程 的 简要 说 明 。 


HIML 标记 














<img id="mylmage'" src="image.gif"” alt="An image'" class="someClass" title= "This is an image"/> | 


TI . 
NodeList 
id:mylImage | 


className:'someClass' class='someClass' 
title:This is an image' title='This is an image' 


其 他 隐 式 或 默认 特性 


一 -> 值 的 对 应 关系 





图 3-1 HTML 标记 被 转化 为 DOM 元 素 ， 包 括 标签 的 特性 以 及 根据 标签 创建 的 属性 。 
浏览 硕 为 元 素 的 特性 和 属性 之 间 创 建 了 对 应 关系 
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保存 在 attributes 列表 中 的 特性 值 和 相应 的 属性 之 间 有 一 条 活动 的 连接 。 改变 特性 值 会 导 
至 相应 的 属性 值 也 发 生变 化 ， 反 之 亦 然 。 即 便 如 此 ， 两 个 值 也 并 不 总 是 完全 相同 。 比 如 , 设置 图 
请 元 素 的 src 特性 为 image.gif， 会 导致 src 属性 被 设置 为 图 厂 的 绝对 URL。 

大 部 分 情况 下 ，JavaScript 属性 的 名 字 和 相应 特性 的 名 字 是 一 致 的 , 但 也 有 一 些 例外 。 比 如 ， 
本 例 中 的 class 特性 对 应 的 属性 名 是 className。 

jQuery 不 仅 提供 了 操作 元 素 特 性 的 简单 方式 ， 而 且 还 允许 访问 元 素 实 例 , 从 而 可 以 改变 其 属 
性 。 操 作 特 性 还 是 操作 属性 取决 于 想 做 什么 以 及 如 何 去 做 。 

接 下 来 就 从 获取 和 设置 元 素 属 性 开始 。 


3.1.1 操作 元 素 属 性 


jQuery 没有 提供 获取 或 修改 元 素 属 性 的 具体 方法 。 不 过 ， 我 们 可 以 使 用 原生 的 JavaScript 语 
法 来 访问 属性 以 及 它们 的 值 。 关 键 在 于 首先 获取 元 系 的 引用 。 

不 过 事实 证 明 , 这 并 不 复杂 。 正 如 在 前 一 章 中 看 到 的 ，jQuery 提供 了 很 多 访问 包装 集中 单个 
元 素 的 方法 。 其 中 的 一 些 方法 如 下 : 

口 对 包装 集 使 用 数组 索引 ， 比 如 $ (whatever) [n]; 

口 使 用 get () 方 法 ， 通 过 索引 返回 单个 元 素 ; 或 者 toarray() 方 法 ， 返 回 由 集合 中 的 元 系 

组 成 的 数组 ; 

口 使 用 sach () 或 map () 方 法 ， 在 回调 因数 中 可 以 使 用 单个 元 素 ; 

口 使 用 ss() 方 法 或 者 :ea() 过 滤器 ; 

口 通过 某 些 方法 (比如 not() 和 filter() ) 的 回调 函数 ,这些 方 法 将 元 又 设 置 为 回调 孙 数 


















































的 上 下 文 。 
以 each () 方 法 为 例 , 可 以 使 用 如 下 代码 设置 DOM 中 每 个 元 素 的 ia 属性 为 元 素 标 签名 与 元 
系 在 DOM 中 位 置 的 组 合 : 
$('*').each (function (n)t 


this.id = this.tagName + n; 
上 


本 例 中 ， 我 们 获取 作为 回调 函数 上 下 文 (this ) 的 元 素 引 用 ， 并 直接 向 其 ia 属性 赋值 。 
在 JavaScript 中 处 理 特性 不 像 人 处理 属性 那么 休 单 明了 ,因此 jQuery 提供 了 多 种 辅助 手段 来 处 
它们 。 下 面 来 看 看 如 何 处 理 特性 。 


3.1.2 ”获取 特性 值 


和 很 多 其 他 jQuery 方法 一 样 ，attr() 方 法 可 以 用 来 执行 读 操 作 或 者 写 操 作 。 当 jQuery 方法 
可 以 进行 这 两 种 操作 时 ， 传 人 方法 的 参数 个 数 和 类 型 就 决定 了 该 执行 方法 的 哪个 变 体 。 

作为 一 个 具有 这 种 两 面 性 的 方法 ，attz() 方 法 可 以 用 来 获取 匹配 集合 中 第 一 个 元 素 的 茶 个 
特性 值 ， 也 可 以 用 来 设置 所 有 匹配 元 素 的 特性 值 。 

执行 读 操 作 的 attr () 方 法 变 体 的 语法 如 下 : 
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方法 语法 : attr 
attr (name) 
获取 匹配 集合 中 第 一 个 元 素 指 定 特性 的 值 
参数 
name (字符 串 ) 需要 获取 值 的 特性 名 称 
返回 值 
第 一 个 匹配 元 素 的 特性 值 。 如 果 匹 配 集 为 空 ,或 者 第 一 个 元 素 不 存在 此 特性 , 则 返回 undqefined 


虽然 我 们 通常 认为 元 素 的 特性 是 由 HTML 预定 义 的 ， 但 是 也 可 以 使 用 attr() ， 通 过 
JavaScript 或 者 HTML 标记 来 设置 日 定义 特性 ,为 了 说 明 这 一 点 ,我 们 修改 前 一 个 示例 中 的 <img> 
元 素 ， 为 其 添加 一 个 目 定义 标记 特性 〈 粗 体 ): 


<img id="mylImage" src="image.gif" alt="An image" CasSs="SsomeC1ass'" 
title="This is an image" data-custom="some value"/> 


注意 ， 我 们 已 经 为 这 个 元 素 添 加 了 一 个 目 定 义 特 性 ， 并 取 了 一 个 缺乏 想象 力 的 名 称 data- 
custom。 可 以 使 用 以 下 代码 获取 特性 的 值 ， 就 好 像 它 是 一 个 标准 特性 : 


$s("#myImage") .attr("data-custom") 








自 定义 特性 与 HTML 

在 HTML 4 中 ,使 用 非 标 准 的 特性 名 称 ( 比如 data-custom) 虽然 是 一 个 常用 的 技巧 ， 
但 是 却 会 导致 标记 是 无 效 的 ， 并 且 不 会 通过 官方 的 验证 测试 "。 如 果 你 比较 关注 验证 的 结果 ， 
那 就 要 谨慎 行 事 了 。 

另 一 方面 ，HITML 5 正式 承认 并 允许 这 样 的 自 定义 特性 ， 只 要 自 定义 特性 的 名 称 以 字符 囊 
data- 为 前 级 即 可 。 根据 HTML 5 的 规则 ， 任 何 遵 循 此 命名 约定 的 特性 都 是 有 效 的 ; 而 不 遵循 
此 约定 的 还 是 无 效 的 。( 详情 请 参考 W3C 的 HTML 5 规范 定义 : http://www.w3.org/TR/html5/ 
dom.html#attr-data, ) 

预料 到 HTML 5 的 流行 ， 我 们 在 示例 中 采用 data- 为 前 级 的 命名 规则 。 


在 HTML 中 特性 的 名 称 是 不 区 分 大 小 写 的 。 无 论 在 标记 中 如 何 声明 特性 ( 例如 title )， 都 可 
以 使 用 任意 大 小 写 变 体 (Tite、TITLE 、TiTIE ) 来 访问 (或 设置 ， 下 一 方 会 介绍 ) 特性 ， 而 且 其 
他 等 价 组 合 也 可 以 完成 。 在 XHTML 中 , 尽管 在 标记 中 特性 的 名 称 必 须 是 小 写 的 ,不 过 也 可 以 使 
用 任意 大 小 写 变 体 获取 特性 值 。 

此 时 你 可 能 会 问 , “既然 访问 属性 这 么 简单 (参见 3.1.1 市 )， 为 什么 还 要 处 理 特性 呢 ? ” 

问题 的 答案 是 ，jQuery 的 attz() 方 法 不 仅仅 是 JavaScript 的 getAttribute() 和 set- 
Attribute() 方 法 的 包装 器 。 除 了 允许 对 元 素 特 性 集 的 访问 之 外 ,jQuery 还 允许 访问 一 些 和 常用 属 
性 ， 而 传统 上 这 一 操作 对 页 面 开 发 者 而 言 是 一 件 痛 各 的 事情 ， 因 为 它 处 处 依赖 于 浏览 硕 的 实现 。 











Q) 这 里 指 的 是 W3C 标记 验证 服务 : http://validator.w3.org/。 
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表 3-1 展示 了 规范 化 的 访问 名 称 的 集合 。 
表 3-1 jQuery 的 attr() 方 法 的 规范 化 访问 名 称 


jQuery 规范 化 名 称 DOM 名 称 

cellspacing cellSpacing 

class className 

colspan colSpan 

cssFloat IE 下 是 styleFloat， 其 他 麟 览 器 下 是 cssFloat 
float IE 下 是 styleFloat， 其 他 训 览 器 下 是 cssF1lLoat 
for htmlFor 

frameborder frameBorder 

maxlength maxLength 

readonly readOnly 

rowspan rowSpan 

styleFloat IE 下 是 stylLleFloat， 其 他 训 览 器 下 是 cssFElLoat 
tabindex tabIndex 

usemap useMap 





除了 这 些 有 用 的 快捷 方式 外 ,attr () 的 设置 操作 变 体 还 有 一 些 便捷 的 功能 。 下 面 就 来 看 一 下 
3.1.3 ”设置 特性 值 


使 用 jQuery 来 设置 包装 集中 元 素 的 特性 有 两 种 方法 。 先 从 最 直接 的 方法 开始 ， 这 个 方法 允 
许 一 次 设置 一 个 特性 ( 对 包装 集中 的 所 有 元 系 )， 语 法 如 下 所 示 。 





万 法 语法 : attr 
ee Value ) 
装 集中 所 有 元 素 的 已 命名 的 特性 设置 为 传 入 的 值 
mame ( 字符 事 ) 要 设置 的 特性 名 称 
value (任意 | 函数 ) 指定 特性 的 值 。 既 可 以 是 生成 一 个 值 的 任意 JavaScript 表达 式 ， 也 
Ce 把 。 为 每 个 包装 元 素 分 别 调用 此 函数 ,传递 元 素 的 索引 和 已 命名 特性 的 
当前 值 。 函 数 的 返回 值 会 成 为 新 的 特性 值 











attr ( Ot 上 变 体 初 看 起 来 很 简单 ， 其 实 它 的 执行 过 程 是 相当 复杂 的 。 

在 这 个 变 体 最 基本 的 形式 中 ， 当 value 参数 是 可 以 生成 值 的 任意 JavaScript 表达 式 (包括 数 
组 ) 时 ， me so， 吉 果 为 特性 值 。 

当 value 参数 是 一 个 洱 数 引用 时 ， 事 情 变 得 更 加 有 趣 。 这 种 情况 下 ， 会 为 包装 
厅 分 别 调用 函数 ， 也 数 的 返回 值 会 作为 特性 值 。 当 函数 被 调用 时 ,需要 问 其 传 入 两 个 参数 : 一 个 
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是 元 素 在 包装 集中 从 零 开始 的 下 标 ， 另 一 个 是 已 命名 特性 的 当前 值 。 此 外 , 在 函数 调用 中 , 将 当 
前 元 条 设置 为 函数 的 上 下 文 (this )， 人 允许 函数 为 每 个 具体 元 素 调整 其 处 理 过 程 一 一 这 也 是 以 这 
种 方式 使 用 函数 的 强大 之 处 。 








考虑 如 下 语句 : 
S('*').attr('title',function(index,previousValue) { 
return previousValue + ' I am element ' + jndex + 
' and my name is ' + (this.id || 'unset'); 


7)3 

这 个 方法 会 作用 于 页 面 上 的 所 有 元 素 ， 通 过 为 每 个 元 素 的 title 特性 附加 一 个 字符 串 (由 
元 素 在 DOM 中 的 下 标 值 和 每 个 元 素 的 ia 特性 值 组 成 ) 来 修改 元 素 的 title 特性 。 

我 们 会 使 用 这 种 方式 来 指定 特性 值 但 前 提 是 元 素 的 特性 值 依赖 于 元 素 其 他 特性 值 或 需要 根 
据 原 来 的 值 来 计算 新 的 值 ， 或 者 由 于 其 他 一 些 原因 需要 单独 设置 每 个 值 。 


a 


attz() 方 法 第 二 种 形式 的 变 体 允许 通过 一 条 语句 一 次 设置 多 个 特性 值 。 

















Dy er 
attr(attributes) 
用 传 入 的 对 象 指定 的 属性 和 值 来 设置 匹配 集中 所 有 元 素 相 应 的 特性 值 
attributes ( 对象 ) 一 个 对 象 ， 其 属性 会 复制 到 包装 集中 所 有 元 素 的 特性 值 上 
返回 值 


包 靖 集 





这 是 一 种 快速 而 简单 的 方式 , 用 来 设置 包装 集中 所 有 元 素 的 多 个 特性 值 。 传 人 的 参数 可 以 是 
任意 的 对 象 引 用 , 通常 是 对 象 的 字面 值 ， 其 属性 指定 了 要 设置 的 特性 的 名 称 和 值 。 考虑 下 面 这 上段 
代码 : 

(iinet ,atted 

{ value: '', title: 'Please enter a value' } 

) 7 
这 个 声 句 设置 所 有 <input> 元 素 的 值 为 空 字符 串 ， 并 将 title 设置 为 字符 串 Please enter 
a Valueo 

注意 ， 如 末 作 为 value 参数 传人 的 对 象 的 属性 值 是 一 个 函数 引用 ， 则 它 的 操作 方式 类 似 于 
前 面 介绍 的 attz () 方 法 ， 并 且 会 为 匹配 集中 的 每 个 元 素 分 别 调用 函数 。 





























警告 IIODU0OO00OO00D0 <input>000 name 0 type0000000 了 下 000 <input> 


UDOUDUOU0UO0UU0OODUOOD0UO0UU0UUUUU0UUUUUUUUUD 
[| filel[| value[| [DD password[| [1 <input>[| [| 咒 


现在 我 们 已 经 知道 了 如 何 获 取 和 设置 特性 了 ， 那 么 如 何 删除 它们 呢 ? 
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3.1.4 删除 特性 
为 了 从 DOM 元 系 中 删除 特性 ， JQuery 提供 了 removeaAttz () 方 法 。 它 的 语法 如 下 所 示 。 


方法 语法 : removeAttr 
removeAttr (name) 
从 每 个 匹配 元 素 中 删除 指定 的 特性 
name (等 符 串 ) 要 删除 的 特性 名 称 
返回 值 


包装 集 


注意 ， 删 除 一 个 特性 不 会 删除 JavaScript DOM 元 素 中 相应 的 属性 ， 尽 管 这 可 能 会 导致 属性 
值 的 改变 。 比 如 ， 从 元 系 中 删除 *eadqonly 特性 会 导致 元 每 的 readonly 属性 值 由 true 变 ; 
false， 但 是 属性 本 刁 不 会 从 元 系 中 删除 。 

现在 就 通过 一 些 示 例 来 学 习 如 何在 页 面 中 运用 这 些 知识 。 


3.1.5 ”有趣 的 特性 


看 看 如 何 使 用 这 些 方法 来 以 不 同 的 方式 处 理 元 素 的 特性 。 

1. 实例 #1 一 一 强制 在 新 窗口 中 打开 链接 

假设 我 们 想 要 在 新 窗口 中 打开 站 点 上 所 有 指向 外 部 域名 的 链接 。 如 果 能 完全 控制 整个 标记 并 
能 为 它们 添加 target 特性 ， 那 这 实现 起 来 就 相当 简单 ， 如 下 所 示 : 

<a href="http://external.com" target=" blank">Some External Site</a> 

这 样 确实 不 错 , 但 是 如 果 不 能 控制 标记 该 怎么 办 ? 我 们 或 许 在 运行 一 个 内 容 管理 系统 或 者 一 
个 维基 站 点 , 在 这 些 站 点 上 最 终 用 户 能 够 添加 内 容 , 但 不 可 能 指望 用 户 为 所 有 的 外 部 链接 都 加 上 
target="_blank"。 首先 要 明确 目标 : 我 们 想 要 在 新 窗口 中 打开 所 有 href 特性 以 http:// 开 头 
的 链接 (我 们 已 经 确定 这 可 以 通过 设置 target 特性 值 为 _blank 来 实现 )。 

可 以 使 用 在 本 节 学 到 的 技巧 简洁 地 实现 ， 如 下 所 示 : 

$s("alhref^='http://']").attr("target"," blank").; 

首先 选择 href 特性 以 http:// 开 头 的 所 有 链接 ( 这 表明 引用 是 外 部 的 )， 然 后 设置 它们 的 
target 特性 值 为 blank。 完 成 这 个 任务 只 需要 一 行 jQuery 代码 。 

2. 示例 #2 解决 可 恶 的 双重 提交 问题 

jQuery 特性 功能 的 另 一 个 极 佳 用 途 是 帮助 解决 一 个 长 期 存在 于 Web 应 用 ( 富 因 特 网 应 用 等 ) 
中 的 问题 ,可恶 的 双重 提交 问题 。 这 是 Web 应 用 的 常见 难题 ， 当 表单 提交 时 会 出 现 延迟 ， 有 时 
是 几 秒 或 者 更 长 ， 这 使 得 用 户 会 多 次 单 击 提 交 按 钮 ， 从 而 给 服务 絮 端 代码 这 来 了 诸多 麻烦 。 
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作为 客户 端的 解决 方案 ( 服务 胡 端 代码 仍然 需要 保持 警惕 )， 我 们 捕获 表单 的 submit 事件 
并 在 第 一 次 单 击 后 茶 用 提交 按钮 。 这 样 , 用 户 将 没有 机 会 多 次 单 击 提交 按钮 ， 而 且 会 看 到 可 见 的 
指示 (假设 已 茶 用 的 按钮 在 浏览 郁 中 这 样 表 现 )， 用 来 提示 表单 正在 提交 处 理 中 。 不 用 为 下 面 示 
例 中 有 关 事 件 的 处 理 细节 担心 ( 详 见 第 4 章 )， 目 前 只 需要 专注 于 attz () 方 法 的 使 用 即 可 : 
$s("form") .submit(function() { 


Ss(":submit",this) .attr("disabled", "disabled"); 
}); 


在 事件 处 理 需 的 主体 部 分 , 我 们 通过 :submit 选择 器 获取 表单 中 的 所 有 提交 按钮 , 并 且 将 其 
disabled 特性 设置 为 "aisabledq" (W3C 官方 推荐 设置 的 特性 值 )。 注意 ， 当 创建 匹配 集 时 ,我 
们 提供 了 上 下 文 值 this (第 二 个 参数 ),。 第 4 章 研 究 事件 处 理 时 你 会 发 现 , 在 事件 处 理 器 内 操作 
时 ，this 指针 总 是 指 回 触发 此 事件 的 页 面 元 素 。 在 本 例 中 ，this 指 回 的 就 是 表单 实例 。 









































什么 时 候 "enablea" 的 元 素 没有 被 禁用 

不 要 想当然 地 认为 可 以 用 下 面 的 语句 将 disabled 的 值 替换 为 enabled: 

$s (whatever) .attr("disabled", "enabled"); 

并 且 期 望 此 元 素 从 此 变 得 可 用 了 。 这 名 代码 仍然 会 禁用 此 元 素 ! 

根据 W3C 的 规则 ， 正 是 disabledqd 特性 的 存在 ( 而 不 是 特性 的 值 ) 才 使 得 此 元 素 被 设置 
为 禁用 状态 。 因 此 它 的 值 是 什么 根本 不 重要 。 如 果 disabled 特性 存在 ， 此 元 素 就 被 禁用 了 。 

因此 ， 为 了 重新 启用 此 元 素 ， 可 以 删除 此 特性 ， 也 可 以 使 用 jQuery 提供 的 简单 方式 。 如 
果 为 此 特性 值 提供 布尔 类 型 值 true 或 false (不 是 字符 串 "true" 或 者 "false" )，jQuery 将 
在 后 台 完 成 正确 的 事情 ，false 则 删除 此 特性 ，true 则 添加 此 特性 。 


警告 DDO000000000000000000000000000000000000 
UDODUOU0OU0UUOODUOODUO0UU0UUUUU0UUUUUUUUUUD 
DDDODUOU0OD0UOODUO0OD0UO0U0U0UUU0UU0UUUUUUNUUUUD 
UUDOUDO0UOUUUU0UUUUUUUUUD 





对 HTML 和 W3C 定义 的 数据 而 言 ,元 条 的 特性 和 属性 是 非 第 有 用 的 概念 ,但 是 在 页 面 创作 
过 程 中 ,我们 经 党 需要 存储 日 定义 数据 。 下 面 来 看 看 在 这 方面 jQuery 可 以 为 我 们 做 什么 。 


3.1.6 ”在 元 素 上 存储 自 定义 数据 


我 们 要 下 和 规 了 当地 表明 态度 : 全 局 变量 真 粳 料 。 

除了 极 少 数 真正 必要 的 情况 外 , 在 定义 和 执行 复杂 的 页 面 行为 时 , 很 难 想 象 得 出 有 比 全 局 变 
量 更 粮 糕 的 信息 存储 方式 了。 这 不 仅 因为 会 遇 到 作用 域 的 问题 ,而 且 在 多 个 操作 并 发 执行 时 ( 打 
开 和 关闭 采 单 、 触 发 Ajax 请 求 、 执 行动 画 ， 等 等 )， 其 扩展 性 也 不 好 。 
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JavaScript 的 原生 也 数 可 以 帮助 我 们 使 用 闭 包 解 决 部 分 问题 , 但 是 闭 包 也 不 能 彻底 解决 问题 ， 
而 且 也 不 适用 于 所 有 情况 。 

因为 页 面 行 为 是 面向 元 素 的 ， 所 以 使 用 元 又 本 映 作 为 存储 范围 是 合理 的 。 再 者 ，JavaScript 
的 本 质 及 其 动态 创建 对 象 自 定义 属性 的 能 力也 可 以 帮助 我 们 解决 问题 。 不 过 我 们 必须 谨慎 行事 。 
DOM 元 系 以 JavaScript 对 象 实例 的 形式 存在 , 就 像 所 有 其 他 的 对 象 实例 一 样 , 这 样 就 可 以 使 用 我 
们 上 自己 选择 的 目 定 义 属性 来 扩展 它们 。 但 这 却 暗藏 危机 | 

这 些 自 定义 属性 (也 就 是 所 谓 的 expandos ) 是 有 风险 的 。 特 别 是 它 可 以 很 容易 地 创建 循环 引 
用 ， 从 而 导致 严重 的 内 存 泄 漏 。 在 传统 的 Web 开发 中 ,， 当 新 的 页 面 加 载 后 老 的 DOM 时 篆 被 丢弃 
了 ， 因 此 内 存 泄漏 可 能 不 会 成 为 大 问题 。 但 是 对 于 我 们 来 说 ， 作 为 高 交互 性 Web 应 用 程序 的 开 
发 者 ， 在 页 面 中 引入 大 量 长 时 间 运 行 的 脚本 ， 内 存 汇 漏 就 有 可 能 成 为 一 个 严重 的 问题 。 

jQuery 提供 了 一 种 解决 方 条 ， 以 一 种 可 探 的 方式 将 数据 附加 到 所 选择 的 DOM 元 系 上 ， 这 样 
就 不 需要 依 徘 有 洪 在 问题 的 expandos 了 。 我 们 可 以 将 任意 的 JavaScript 值 、 甚 至 数组 和 对 和 象 通过 
名 为 data() 的 巧妙 方法 附加 到 DOM 元 素 上 。 语 法 如 下 所 示 。 





























万 法 语法 : data 
data (name, value) 
DDODUU0OODDUOUDOUUUUD jQueryU UUUUUD 
U0 
es DDDUUUUUUUUUD 
WaS DOD0D00D00D0D0U00000000000U0U00000U0UU00UUUUUUD 
DODDUOODODUUODODUDUUUUUUUUUD 
UD0 
UD 





只 写 的 数据 不 是 特别 有 用 ， 因 此 必须 要 有 一 个 获取 已 命名 数据 的 方法 。 再 次 使 用 gata() 方 
法 是 顺 理 成 草 的 事情 。 使 用 aata() 方 法 获取 数据 的 语法 如 下 所 示 。 





方法 语法 : data 
data (name) 
通过 指定 的 名 称 来 获取 之 前 在 包装 集 的 第 一 个 元 素 上 保存 的 任何 数据 
参数 
name ( 宁 符 囊 ) 要 获取 的 数据 名 称 
返回 值 
获取 的 数据 ， 如 果 没 有 找到 则 返回 undefined 
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考虑 到 内 存 管 理 的 需要 ， ]Query 也 提供 了 removeData() 方 法 来 丢弃 那些 不 青 需 要 的 数据 。 


方法 语法 : removeData 
removeData (name) 
通过 指定 的 名 称 来 删除 之 前 在 包装 集 的 所 有 元 素 上 保存 的 数据 
参数 
name (字符 串 ) 要 删除 的 数据 名 称 








注意 , 在 使 用 jQuery 方法 从 DOM 中 删除 一 个 元 素 时 不 需要 “手工 ”删除 数据 。jQuery 将 会 
很 聪明 地 帮 我 们 处 理 这 个 事情 。 

在 接 下 来 几 半 的 很 多 示例 中 你 将 看 到 ,将 数据 附加 到 DOM 元 系 上 的 能 力 对 我 们 来 说 如 虎 添 
并 ,对 于 被 全 局 变量 搞 的 举 头 转 问 的 开发 者 来 说 , 将 数据 存储 在 元 素 层 次 结构 的 上 下 文中 为 应 用 
打开 了 一 个 全 新 的 世界 。 本 质 上 ，DOM 树 已 经 成 为 了 一 个 完整 “命名 空间 ”层次 结构 ， 我 们 不 
再 局 限于 单个 的 全 局 空间 。 

在 本 市 的 前 面部 分 我 们 曾 提 到 className 属性 ， 作 为 说 明 标 记 特 性 名 称 不 同 于 属性 名 称 的 
示例 。 但 事实 上 ， 类 名 在 其 他 方面 也 有 点 特别 ， 因 此 jQuery 对 其 进行 了 特殊 处 理 。 下 一 市 将 会 
前 述 比 直接 访问 className 属性 或 使 用 attr() 方 法 更 好 的 处 理 类 名 的 方式 。 


3.2 ”改变 元 素 样 式 


改变 元 系 样 式 的 方法 有 两 种 。 可 以 添加 或 删除 一 个 类 名 ,使 得 现 有 的 样式 表 基 于 新 的 类 来 重 
新 设置 元 素 的 样式 。 也 可 以 操作 DOM 元 素 ， 直 接 为 其 应 用 样式 。 
下 面 来 看 下 jQuery 如 何 通 过 类 来 修改 元 素 样 式 ， 从 而 简化 样式 的 修改 方式 。 


3.2.1 添加 和 删除 类 名 


DOM 元 系 的 class 特性 的 格式 和 语义 与 众 不 同 ,并且 对 于 创建 交互 式 界面 至 关 重 要 。 为 元 
素 添 加 类 名 或 从 元 素 中 删除 类 名 ， 是 动态 修改 元 素 泻 染 样式 的 主要 手段 。 

可 以 为 每 个 元 系 指 定 任意 数量 的 类 名 , 这 是 导致 元 素 类 名 非常 独特 的 一 方面 原因 (也 是 需要 
应 对 的 一 个 挑战 ) 在 HTML 中 , class 特性 用 来 提供 以 空格 分 隔 , 由 多 个 类 名 所 组 成 的 字符 串 。 
例如 : 

<div class="someClass anotherClass yetAnotherClass"></div> 

遗憾 的 是 , DOM 元 系 相 应 的 className 属性 不 是 以 类 名 组 成 的 数组 ,而 是 以 空格 分 隔 的 字 
符 串 。 多 麻烦 啊 ! 这 太 令 人 失望 了 ,这 就 意味 着 每 当 我 们 问 一 个 拥有 类 名 的 元 素 中 添加 (或 删除 ) 
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类 名 时 ,网 需要 在 该 字符 叮 的 时 候 对 其 进行 解析 以 确定 单个 名 称 ,， 并 且 在 写 的 时 候 确保 恢复 成 有 
效 的 空格 分 隔 的 格式 。 





注意 D0000000000000000000000000000000000000 








虽然 编写 代码 来 处 理 所 有 这 些 事情 不 是 艰巨 的 任务 ， 不 过 将 操作 的 细节 隐藏 起 来 并 抽 旬 出 
API 总 是 个 好 的 想法 。 芋 运 的 是 ,jQuery 已 经 为 我 们 完成 了 这 一 切 。 
为 匹配 集中 所 有 的 元 素 旅 加 类 名 ， 利 用 adadqclass () 方 法 就 很 催 便 。 








a ) 夫 二 > 二 addClass 


addClass (names) 
为 包装 集中 的 所 有 元 素 添 加 指定 的 单个 或 多 个 类 名 


参数 

names (字符 囊 | 了 学 数 ) 指定 要 添加 的 单个 类 名 , 或 者 以 空格 分 隔 的 字符 串 表 示 的 多 个 类 
名 。 如 果 参 数 是 一 个 函数 ， 则 为 每 个 包装 元 素 调用 此 函数 ， 设 置 当 前 元 素 为 函 
数 上 下 文 ， 并 且 传 递 两 个 参数 : 元 素 的 下 标 和 当前 类 的 值 。 函 数 的 返回 值 作为 
单个 或 者 多 个 类 名 

返回 值 

包装 集 


删除 类 名 可 以 直接 使 用 removeclass () 方 法 来 实现 。 


阿 二 Ve。 removeClass 


removeClass (names) 
从 包装 集中 的 每 个 元 素 上 删除 指定 的 单个 或 多 个 类 名 


参数 

names (字符 串 | 函数 ) 指定 要 删除 的 单个 类 名 ,或 者 以 空格 分 隔 的 字符 串 表 示 的 多 个 类 
名 。 如 果 参 数 是 一 个 函数 ， 则 为 每 个 包装 元 素 调用 此 函数 ， 设 置 当 前 元 素 为 函 
数 上 下 文 ， 并 且 传 递 两 个 参数 : 元 素 的 下 标 和 删除 操作 之 前 的 类 名 的 值 。 函 数 
的 返回 值 作 为 将 要 删除 的 单个 或 者 多 个 类 名 

返回 值 

包装 集 








我 们 可 能 经 党 想 要 来 回 切 换 一 组 样式 , 这 可 能 是 为 了 表示 两 个 状态 之 间 的 变化 , 也 可 能 是 出 
于 界面 上 有 意义 的 任何 其 他 原因 。jQuery 通过 toggleclass() 方 法 简单 化 操作 。 
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D3 去 toggleClass 
toggleClass (names) 
如 果 元 素 不 存在 指定 类 名 则 为 其 添加 此 类 名 ， 如 果 元 素 已 经 拥有 这 个 类 名 则 从 中 删除 此 类 
名 。 注 意 , 会 分 别 检测 每 个 元 率 ， 因 此 一 些 元 素 可 能 被 添加 了 类 名 ,而 另外 一 些 则 可 能 被 删 
除了 类 名 


参数 

names ( 字符 串 | 函数 ) 指定 要 切换 的 单个 类 名 ,或 者 以 空格 分 隔 的 字符 事 表示 的 多 个 类 
名 。 如 果 参 数 是 一 个 函数 ， 则 为 每 个 包装 元 素 调用 此 函数 ,设置 当前 元 素 为 函数 
上 下 文 。 声 数 的 返回 值 作为 单个 或 者 多 个 类 名 

返回 值 

包装 集 





当 我 们 需要 快速 徐 清 地 在 元 又 之 间 切 换 显 示 效 果 时 ，toggleclass () 方 法 就 能 派 上 用 场 
了 。 考 虑 一 个 “斑马 条 纹 ” 示 例 ， 我 们 和 希望 为 表格 中 的 行 交 蔡 议 置 不 同 的 颜色 。 假 设 出 于 某 些 
合理 的 理由 ， 我 们 需要 在 某 些 事件 发 生 时 ， 将 奇数 行 的 彩色 背景 与 偶数 行 的 背景 进行 互 换 〈 还 
可 能 再 换 回 来 )。toggleclass () 方 法 可 以 轻松 实现 在 为 陋 行 添加 类 名 的 同时 ， 从 剩余 的 行 
删除 类 名 。 

下 面 就 来 试 一 试 。 在 文件 chapter3/zebra.stripes.html 中 ， 你 可 以 找到 一 个 包含 车辆 信息 表格 
的 页 面 。 在 页 面 的 脚本 定义 中 ， 定 义 了 如 下 的 一 个 因数 : 


function swapThem() { 
$S('tr') .toggleClass('striped'); 
} 


这 个 函数 使 用 toggleclass () 方 法 为 所 有 <tzr> 元 系 切 换 名 为 striped 的 类 。 我 们 也 定义 了 
文档 就 绪 处 理 器 ， 如 下 所 示 : 


Ss(function(){/ 














Ss("table tr:nth-child(even)") .addClass ("striped").; 
$s("table'") .mouseover (swapThem) .mouseout (swapThem); 


Rs 

该 处 理 锅 主体 中 的 第 一 个 语句 使 用 了 我 们 在 前 一 章 中 学 过 的 nth-child 选择 硕 ， 为 表格 中 
的 隔行 元 素 应 用 类 striped。 第 二 个 语句 为 mouseover 和 mouseout 事件 创建 了 两 次 都 调用 同 
一 个 函数 swapThem 的 事件 处 理 需 。 我 们 会 在 下 一 章 中 全 面 学 习 事 件 处 理 , 不 过 现在 的 重点 是 当 
鼠标 进入 或 者 移出 表格 时 ， 会 执行 以 下 代码 : 

s('tr') .toggleclass ('striped'); 

结果 是 每 当 和 鼠标 光标 进入 或 者 移出 表格 时 ， 就 会 删除 所 有 拥有 striped 类 的 <tr> 元 素 ， 
并 问 所 有 没有 striped 类 的 <tr> 元 系 添 加 此 类 。 这 个 (有 点 烦人 的 ) 行 为 在 图 3-2 中 分 两 部 分 
显示 。 
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图 3-2 每 当 鼠 标 光标 进入 或 者 移出 表格 时 ， 切 换 striped 类 的 有 无 状态 
根据 元 素 是 否 已 经 拥有 类 来 进行 类 切换 是 十 分 常见 的 一 种 操作 , 不 过 根据 其 他 任意 条 件 来 切 
换 类 也 很 常见 。 对 于 这 种 更 普 裔 的 情况 ， ]Query 提供 了 toggleClass () 方法 的 另 一 个 变 体 ， 它 
可 以 让 我 们 根据 任意 的 布尔 表达 陈 来 添加 或 者 删除 类 。 

















方法 语法 : toggleclass 

toggleClass (names, switch,) 

如 果 switch 表达 式 的 计算 结果 为 true， 则 添加 此 类 名 ; 如 果 计 算 结 果 为 false， 则 删除 此 

类 名 

参数 

names (字符 串 | 函数 ) 指定 要 切换 的 单个 类 名 ,或 者 以 空格 分 隔 的 字符 串 表 示 的 多 个 类 
名 。 如 果 参 数 是 一 个 函数 ， 则 为 每 个 包装 元 素 调用 此 函数 ， 设 置 当 前 元 素 为 函数 
上 正文， 并 且 传 递 两 个 参数 : 元 素 的 下 标 和 当前 类 的 值 。 函 数 的 返回 值 作为 单个 
或 者 多 个 类 名 

switch (布尔 ) 一 个 控制 表达 式 ， 它 的 值 决定 了 是 要 为 元 素 添 加 类 ( 值 为 true ) 还 是 删 
除 类 ( 值 为 false ) 
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判断 元 素 是 否 包含 特殊 的 类 是 很 常见 的 需求 。 例如 ,可 能 需要 根据 元 素 是 否 含有 特定 类 来 进 
行 条 件 转移 ， 或 者 只 是 想 使 用 类 来 识别 某 一 类 型 的 元 素 。 

使 用 jQuery， 就 可 以 通过 调用 hasclass () 方 法 来 实现 这 些 功 能 : 

$s("p:first") .hasClass ("surpriseMe") 


如 末 匹 配 集中 有 包含 指定 类 的 元 系 ， 则 此 方法 将 返回 true。 该 方法 语法 如 下 所 示 。 








万 法 语法 : hasCclass 
hasClass (name) 
确定 匹配 集中 是 否 有 元 素 拥有 通过 name 参数 传 入 的 类 名 
参数 
ne (字符 串 ) 要 检查 的 类 名 
返回 值 
如 果 和 包装 集中 有 元 素 拥 有 传 入 的 类 名 ， 则 返回 true; 否则 返回 false 


回想 下 第 2 昔 中 的 is () 方 法 ， 以 下 代码 也 可 以 实现 相同 的 效果 : 

$s ("p:first") .is('".surpriseMe") 

但 是 可 以 证 明 ，nhasCclass() 方 法 有 助 于 编写 可 读 性 更 高 的 代码。 从 内 部 实现 来 看 ， 
hasclass () 也 更 为 高 效 。 

另 一 个 凋 见 需求 是 ,以 数组 的 形式 返回 特定 元 系 的 类 名 列表 ， 而 不 是 难以 处 理 的 以 空格 分 隔 
的 列表 。 可 以 答 试 编写 以 下 代码 来 实现 : 

Ss(rprfirst") .attr("className') ,split(" "); 

我 们 介绍 过 ,如 果 查 询 的 特性 不 存在 ，attr () 方 法 将 会 返回 undefined, 因此 如 果 <p> 元 素 
没有 任何 类 名 这 个 语句 就 会 抛 出 错误 。 

可 以 通过 先 检 查 特 性 是 否 存 在 来 解决 这 个 问题 如果 想 将 整个 代码 包 疙 在 一 个 可 重用 的 、 有 
效 jQuery 扩展 中 ， 可 以 这 样 写 : 

















Ss.fn.getClassNames = function() f{ 
Var name = this.attr("className").; 
if (name != null) { 


return name.split(" "); 
} 
else { 
return [|]; 
} 
上 
不 必 担 心 用 来 扩展 jQuery 的 语法 细节 ， 第 7 曹 将 详细 探讨 这 个 主题 。 重 要 的 是 一 旦 定义 了 
这 个 扩展 ， 就 可 以 在 脚本 的 任何 地 方 使 用 getclassNames () 方 法 来 获取 由 类 名 组 成 的 数组 ， 如 
条 元 素 没 有 任何 类 ， 此 方法 将 返回 空 数组 。 太 棒 了 ! 
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CSS 类 名 是 操作 元 系 展 现 样 式 的 一 个 强大 工具 , 但 有 时 我 们 想 下 接 操 作 样 式 本 里 的 细 让 ， 比 
如 下 接 在 元 素 上 声明 样式 。 来 看 看 jQuery 为 此 提供 了 哪些 功能 








3.2.2 ”获取 和 设置 样式 

尽管 修改 元 素 的 类 特性 允许 我 们 选择 要 应 用 的 一 组 预定 义 样式 表 规则 , 但 有 时 候 我 们 想 要 整 
体 覆 盖 样 式 表 。 直 接 将 样式 应 用 到 元 素 上 ( 通过 可 以 从 所 有 DOM 元 素 上 获取 的 style 属性 ) 将 
会 自动 覆盖 样式 表 ， 这 让 我 们 可 以 更 精确 地 控制 单个 元 素 及 其 样式 。 

jQuery 的 css () 方 法 允许 我 们 操作 这 些 样式 ， 甚 工作 方式 类 似 于 attr () 方 法 。 可 以 通过 指 
定名 称 和 值 来 设置 单个 的 CSS 样式 ， 也 可 以 通过 传人 一 个 对 象 来 设置 一 系列 CSS 样式 。 首 先 来 
看 看 设置 单个 样式 的 名 称 和 值 。 




















方法 语法 : css 


css (name, value) 


设置 每 个 匹配 元 素 的 已 命名 CSS 样式 属性 为 指定 的 值 


name (字符 事 ) 要 设置 的 CSS 属性 名 称 

value (字符 串 | 数 罕 | 函 : ee 一 个 包含 属性 值 的 字符 事 、 数 字 ,， 或 函数 。 如 果 传 入 的 参 
数 是 函数 ， 则 为 包装 集中 的 每 个 元 素 调 用 此 函数 ， 设 置 当 前 元 素 为 函数 上 下 文 ， 
并 且 传 递 两 个 参数 : 元 素 下 标 和 CSS 属性 的 当前 前 值 。 函数 的 返回 值 作为 CSS 属 
性 值 的 新 值 

返回 值 

包装 集 


如 上 所 述 ， 参数 value 接受 函数 的 方式 类 似 于 attr() 方 法 。 这 意味 着 (例如)， 可 以 将 包 
装 集 中 所 有 元 系 的 宽度 扩大 20 像 系 ， 如 下 所 示 : 


Ss("div.expandable") .css ("width",function(index, currentWidth) { 
return currentWidth + 20; 


})}; 

还 有 一 点 值得 注意 , (也 是 jQuery 为 开发 提供 的 男 一 种 便利 。) 通过 传递 一 个 0.0~1.0 之 间 的 
值 ， 就 可 以 让 通常 有 问题 的 opacity 属性 完美 地 跨 浏 览 絮 工作， 不 再 需要 组 合 使 用 IE alapha 滤 
镜 、-moz-opacity 以 及 其 他 类 似 的 什 ! 

下 面 来 看 看 css () 方 法 的 快捷 形式 ， 它 的 工作 方式 和 attr() 的 快捷 版 本 完全 一 致 。 
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方法 语法 : css 
css (properties) 
设置 所 有 匹配 元 素 的 CSS 属性 为 传 入 对 象 的 多 个 键 值 
参数 
properties (对 象 ) 指定 一 个 对 象 ， 其 属性 被 复制 为 包装 集中 所 有 元 素 的 CSS 属性 
返回 值 


包装 集 








在 前 一 章 的 表 2-1 中 ， 我 们 已 经 看 到 这 个 方法 的 变 体 非常 有 用 。 为 了 减少 你 翻 页 的 麻烦 ， 我 
们 把 相关 的 代码 再 次 列 出 来 : 
$('<img>', 
{ 
src: 'images/little.bear.png', 
alt: 'Little Bear', 
title:'I woof in your general direction’', 
click: function()t 
alert($s(this) .attr('title')).; 
} 
}) 
.CSS({ 
cursor: ‘pointer', 
border: 'lpx solid black', 
padding: '12px 12px 20px 12px', 
backgroundColor: 'white' 


}) 





和 在 attr() 方 法 的 快捷 版 本 里 一 样 ， 在 properties 参数 对 和 象 中 我 们 可 以 使 用 函数 作为 任 
何 CSS 属性 的 伸 ， 包 法 集中 的 每 个 元 条 会 分 别 调用 该 函数 ， 以 确定 将 要 应 用 的 值 。 

最 后 ， 可 以 通过 将 名 称 传人 css () 方 法 ,以 便 获 取 已 计算 的 与 此 名 称 关 联 的 属性 样式 。 当 提 
到 已 计算 的 样式 时 ， 指 的 是 应 用 了 所 有 链接 、 般 入 和 内 联 CSS 之 后 的 样式 。 令 人 印象 深 刻 的 是 ， 
这 可 以 在 所 有 浏览 器 下 完美 地 工作 ， 其 至 对 opacity 也 一 样 ， 它 会 返回 表示 一 个 字符 串 ， 表 示 
0.0~1.0 之 间 的 数字 。 











方法 语法 : css 
css (name) 
获取 包装 集中 第 一 个 元 素 的 CSS 属性 的 已 计算 值 ， 这 个 CSS 属性 由 name 指定 
参数 
name (字符 串 ) 指定 一 个 CSS 属性 的 名 称 ， 返 回 它 的 已 计算 样式 值 
返回 值 
字符 串 形 式 的 已 计算 样式 值 
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切记 css () 方 法 的 这 个 变 体 总 是 返回 字符 串 , 因此 如 果 需 要 数字 或 其 他 的 类 型 时 ， 就 必须 解 

析 这 个 返回 的 字符 串 。 
这 并 不 总 是 很 方便 ， 因此 对 于 小 训 分 经 党 访问 的 CSS 值 ，jQuery 体贴 地 提供 了 很 便捷 的 方 

法 来 访问 这 些 值 并 将 其 转化 为 最 弟 用 的 类 型 。 

1. 获取 和 设置 尺寸 

如 果 想 在 页 面 上 设置 或 获取 CSS 样式 时 ， 元 率 的 宽度 和 高 度 应 该 是 最 常用 的 一 组 属性 。 
jQuery 允许 我 们 以 数字 值 而 不 是 字符 串 的 方式 来 处 理 元 素 的 太 寸 ， 这 让 事情 变 得 简单 很 多 。 

具体 而 言 ， 我 们 可 以 使 用 便捷 的 wiath() 和 height () 方 法 来 获取 (或 设置 ) 元 素 的 宽度 和 
高 度 的 数值 。 可 以 这 样 来 设置 元 素 的 宽度 和 高 度 ， 如 下 所 示 。 















































方法 语法 : width 和 height 
width(value) height (value) 
设置 匹配 集中 所 有 元 素 的 宽度 和 高 度 
参数 
value (数值 | 字符 串 | 函数 ) 要 设置 的 值 。 它 可 以 是 以 像素 为 单位 的 数字 ， 也 可 以 是 以 单 
位 (比如 px、em、%) 表示 的 字符 串 值 。 如 果 没 有 指定 单位 ， 则 默认 为 px。 


ae ， 则 为 每 一 个 包装 元 素 调 用 此 函数 ， 传 递 当 前 元 素 作 为 函数 
上 上下文。 函数 的 返回 值 作为 要 设置 的 值 


切记 这 两 个 方法 是 更 为 详细 的 css () 函数 快捷 方式 ， 因 此 


$s("div.myElements") .width(500) 


Ss("div.myElements") .css("width",500) 


可 以 像 下 面 这 样 来 获取 宽度 和 局 度 。 





方法 语法 : width 和 height 
width() 
height() 
获取 包装 集中 第 一 个 元 素 的 宽度 或 高 度 


返回 什 
已 计算 的 宽度 或 高 度 ， 它 是 以 像素 为 单位 的 数值 
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事实 上 ,以 数值 形式 返回 宽度 和 高 度 值 并 不 是 这 些 曙 数 提供 的 唯一 便利 。 如 果 你 尝试 通过 查 
看 元 素 的 style.width 和 style.height 属性 来 获取 其 宽度 和 高 度 , 就 会 面 对 令 人 泪 丧 的 事实 : 
只 能 通过 元 素 相应 的 style 属性 来 设置 这 些 属性 。 为 了 通过 这 些 属性 来 获取 元 素 的 尺寸 ， 必 须 
首先 设置 它们 。 这 并 不 是 很 有 用 ! 

另 一 方面 ，wiath() 和 height () 方 法 计算 并 返回 元 素 的 大 小 。 在 流 陈 布局 的 简单 页 面 ， 
知道 元 系 的 精确 矿 二 通 稼 不 是 很 必要 ,但 是 在 高 交互 的 脚本 页 面 ， 知 道 这 些 精 确 的 矿 寸 对 于 正 
确 地 放置 活动 元 素 ( 比如 上 下 文 菜单 、 自 定义 工具 提示 、 已 扩展 控件 以 及 其 他 动态 组 件 ) 至 关 
重要 。 

现在 让 这 两 个 方法 工作 起 来 吧 。 图 3-3 所 示 的 示例 页 面 由 两 个 基本 元 素 组 成 : 一 个 是 作为 测 
试 对 象 的 <daiv> 元 素 ， 它 包含 一 段 文本 (以 边框 和 背景 颜色 突出 显示 )， 另 一 个 是 用 来 显示 测试 
对 和 象 尺 寸 的 <div>。 


@00 Dynamic Dimensions Example = | 
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图 3-3 测试 元 系 的 宽度 和 高 度 是 不 辐 定 的 ， 它 们 取决 于 浏览 从 窗口 的 宽度 


因为 没有 应 用 指定 尺寸 的 样式 规则 , 所 以 测试 对 象 的 尺寸 事先 并 不 知道 。 元 素 的 宽度 是 由 浏 
览 需 窗 口 的 宽度 决定 的 ,而 它 的 高 度 取决 于 需要 多 少 空间 来 显示 包含 的 文本 。 改 变 浏览 喜 窗 口 的 
大 小 会 导致 元 陛 的 高 度 和 宽度 发 生 改 变 。 

我 们 在 页 面 中 定义 了 一 个 函数 ， 这 个 冰 数 将 会 使 用 wigth() 和 neight () 方 法 获取 测试 
对 象 <div> (识别 为 testsubject ) 的 尺寸 ， 并 将 结果 值 显示 在 第 二 个 <div> (识别 为 
display ) 中 。 
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function displayDimensions() { 
So(rH9dieplav’ yy Html' 
$s('#¥testSubject') .width()+'x'+S$ ('#testSubject') .height() 


> 


在 页 面 的 就 绪 处 理 右 中 调用 这 个 函数 。 结 果 显 示 ， 在 那个 特定 的 浏览 絮 窗 口中 display 元 
素 的 初始 值 显示 为 589 像素 x60 像素 ， 如 图 3-3 的 上 半 部 分 所 示 。 

在 窗口 的 尺寸 调整 处 理 器 中 也 调用 了 同一 个 孔 数 ， 它 会 在 浏览 絮 窗 口 改变 时 更 新 显示 结 
如 图 3-3 下 半 部 分 所 示 。 

随时 确定 元 素 的 已 计算 尺寸 ， 这 个 能 力 对 于 精确 定位 页 面 上 的 动态 元 素 至 关 重要 。 

这 个 页 面 的 完整 代码 如 代码 清单 3-1 中 所 示 , 也 可 以 在 文件 chapter3/dimensions.html 中 找到 。 








代码 清单 3-1 动态 追踪 并 显示 元 系 的 尺寸 


<!IDOCTYPE html> 


<html> 
<head> 
<title>Dynamic Dimensions Example</title> 
<link rel="stylesheet" type="text/css" href="../styles/core.css"/> 
<style type="text/css"> 
body { 


background-color: +#¥eeeeee; 

} 

#testSubject { 
background-color: #ffffcc; 
border: 2px ridge maroon,; 
Padding: 8px; 


font-size: .85em; 
} 
</style> 
<script type="text/javascript" 
src="../scripts/jJquery-1.4.js"></script> 
<ascript type="text/jJavaseript"»> | 建立 调用 report() 攀 
S (Tometion() 数 的 尺寸 调整 处 理 器 


S (window) .resize (displayDimensions).; 


0 Sa 在 文档 就 绪 处 理 器 中 调用 report () 
2 函数 
function displayDimensions() { < 一 一 一 


Cidalenlay ry .html 
$s('#testSubject') .width()+'x'+S('#testSubject') .height() 


本 显示 测试 对 象 的 宽度 和 高 度 





</script> 

head 
</head> 使 用 模拟 文本 声明 
本 测试 对 象 


<div id="testSubject"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aliquam eget enim id neque aliquet porttitor. Suspendisse 
nisl enim, nonummy ac, nonummy ut, dignissim ac, JjJusto. 
Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum 
sed neque vehicula rhoncus. Nam faucibus pharetra nisi. 
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Integer at metus. Suspendisse potenti. Vestibulum ante 
ipsum primis in faucibus orci luctus et ultrices posuere 
cubilia Curae; Proin culs eros at metus pretium elementum. 


</div> 
<div id="display"></div> 在 此 区 域 显示 宽度 和 
</body> 高 度 
</html> 局 


除了 非常 方便 的 widtn() 和 height() 方 法 ,jQuery 还 提供 了 类 似 的 方法 用 来 获取 更 加 特殊 
的 尺寸 值 ， 表 3-2 列 出 了 这 些 方法 。 
表 3-2 ”其 他 与 尺寸 相关 的 jQuery 方法 








方 ” 法 描述 
innerHeight () 返回 第 一 个 匹配 元 素 的 “内 部 高 度 ”， 不 包含 边框 但 包含 内 边 距 
innerwidth() 返回 第 一 个 匹配 元 素 的 “内 部 宽度 ”， 不 包含 边框 但 包含 内 边 距 
outerHeight (margin) 返回 第 一 个 匹配 元 素 的 “外 部 高 度 ”, 包含 边框 和 内 边 距 。 如 果 margin 参 数 为 true， 
则 包含 外 边 距 ， 否 则 忽略 外 边 距 
outerWidth (margin) 返回 第 一 个 匹配 元 素 的 “外 部 宽度 ”, 包含 边框 和 内 边 距 。 如 果 margin 参 数 为 true， 


则 包含 外 边 距 ， 否 则 忽略 外 边 距 


当 处 理 窗 口 或 文档 元 素 时 ,推荐 使 用 width() 和 height () ， 避 免 使 用 内 部 或 者 外 部 方法 。” 

还 没有 结束 ，jQuery 还 提供 了 轻松 文 持 定 位 和 滚动 值 的 方法 。 

2. 定位 和 滚动 

jQuery 提供 了 两 个 获取 元 素 位 置 的 方法 。 这 两 个 方法 都 返回 一 个 JavaScript 对 象 ， 这 个 对 象 
包含 两 个 属性 : top 和 left， 很 明显 这 两 个 属 ai 

这 两 个 方法 使 用 不 同 的 参照 源 来 测量 元 素 相 对 于 参照 源 的 计算 值 。 其 中 的 一 个 方法 


offset()， 返 回 相 对 于 文档 的 位 置 。 




















方法 语法 : offset 
offset() 
返回 包装 集中 第 一 个 元 素 相 对 于 文档 参照 源 的 位 置 ( 以 px 为 单位 ) 
参数 
无 
返回 值 
一 个 用 浮 点 数 〈 通 第 四 舍 五 入 为 最 近 的 整数 ) 来 表示 left 和 top 属性 的 JavaScript 对 象 ， 用 
来 描述 相对 于 文档 源 的 以 像素 为 单位 的 位 置 








另 一 个 方法 是 position ( 返回 以 元 素 的 最 近 偏 移 父 元 素 为 参照 源 的 相对 位 置 。 


(Qs (window) .innerHeight () 会 抛 出 异常 ， 而 $ (window) .outerHeight() 则 返回 NaN。 
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3 二 position 


position() 
返回 包装 集中 第 一 个 元 素 相 对 于 最 近 偏 移 父 元 素 的 位 置 ( 以 px 为 单位 ) 


返回 值 
一 个 以 整数 来 表示 left 和 top 属性 的 JavaScript 对 得 ， 用 来 描述 相对 于 最 近 偏 移 父 元 素 的 位 
置 (以 px 为 单位 ) 


元 素 的 偏 移 父 元 素 是 拥有 显 式 定位 规则 relative 或 absolute 的 最 近 的 祖先 元 素 。 

offset() 和 position() 都 只 能 对 可 见 元 系 使 用 , 我 们 推荐 所 有 的 内 边 距 、 边 杠 、 外 边 距 都 
使 用 像素 值 以 便 获取 精确 的 结果 

除了 元 素 定 位 ，jQuery i 还 赋予 了 我 们 获取 和 设置 元 素 滚动 位 置 的 和 bE 力 。 表 3-3 描述 了 这 些 
方法 。 

表 3-3 中 的 所 有 方法 对 可 见 和 隐藏 元 素 都 有 效 。 


表 3-3 jQuery 滚动 控制 方法 




















方法 描述 
scrollLeft () 返回 第 一 个 匹配 元 素 的 水 平 深 动 偏 移 值 
scrollLeft (value) 设置 所 有 匹配 元 素 的 水 平 深 动 偏 移 值 
SorolLlTonp() 返回 第 一 个 匹配 元 素 的 垂直 滚动 偏 移 值 
sectollTop (value) 设置 所 有 匹配 元 素 的 垂直 滚动 偏 移 值 


既然 已 经 学 了 如 何 获 取 和 设置 元 率 的 样式 ， 接 下 来 就 开始 学 习 修 改 其 内 容 的 各 种 方法 。 
3.3 ”设置 元 素 内 容 


当 谈 到 修改 元 素 的 内 容 时 ， 有 一 场 正 在 进行 的 关于 哪 种 技术 更 好 的 争论 : 是 使 用 DOM API 
方法 还 是 改变 元 素 的 内 部 HTML。 

尽管 使 用 DOM API 方 法 肯定 是 正确 的 ,但 是 它 相 当 “ 哎 呆 ” 并 晶 会 产生 大 量 代 码 ， 其 中 的 
大 部 分 代码 很 难 用 肉眼 来 检查 其 正确 性 。 在 大 多 数 情 况 下 ， 修 改元 厅 的 HTML 更 加 简单 、 高 效 ， 
因此 jQuery 提供 了 很 多 方法 来 完成 这 一 任务 。 


3.3.1 替换 HTML 或 者 文本 内 容 


首先 是 简单 的 ntml () 方 法 ， 当 不 带 使 用 参数 调用 时 ， 就 获取 元 系 的 HIML 内容 ; 当 市 参数 
调用 时 ， 就 像 其 他 jQuery 函数 那样 ， 设 置 元 系 的 HTML 内 容 。 
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下 面 是 获取 元 素 的 HTML 内 容 的 语法 。 


方法 语法 : html 
html () 
获取 匹配 集中 第 一 个 元 素 的 HIML 内 容 
pi 
返回 值 
第 一 个 匹配 元 素 的 HTML 内 容 。 返 回 的 值 与 所 访问 元 素 innerHTML 属性 是 一 样 的 








下 面 是 设置 所 有 匹配 元 条 的 HTML 内 容 的 语法 。 





万 法 语法 : html 
html (content) 
将 传 入 的 HTML 片段 设置 为 所 有 匹配 元 素 的 内 容 
参数 
content 《字符 串 | 函 数 ) 要 设置 为 元 素 内 容 的 HTML 片段 。 如 果 参 数 是 一 个 函数 ， 则 会 
为 每 一 个 包装 元 素 调 用 此 函数 ， 设 置 当 前 元 素 为 函数 上 下 文 ， 并 传递 两 个 参数 ， 
元 素 的 下 标 和 当前 元 素 的 内 容 ， 函数 的 返回 值 作为 新 的 内 容 


也 可 以 只 设置 或 者 获取 元 素 的 文本 内 容 。 不 带 参 数 调用 text () 方 法 ， 就 会 返回 所 有 文本 组 
合 而 成 的 字符 串 。 例 如 ,假设 有 如 下 HTML 片段 : 
<ul id="theList"> 
<li>One</1i> 
<l1i>Two</1i> 
<l1i>Three</1i> 


<l1i>Four</1i> 
</ul> 


如 下 语句 |: 


Var text = S$('#theList') .text().; 


把 变 量 text 设置 为 OneTwoThreeFouro 
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方法 语法 : text 
text () 
将 包装 元 素 中 的 所 有 文本 内 容 连 接 起 来 ， 并 作为 此 方法 的 结果 返回 
参数 
无 
返回 值 
连接 而 成 的 字符 囊 





也 可 以 使 用 text () 方 法 来 设置 包 沪 元 系 的 文本 内 容 。 这 个 格式 的 语法 如 下 所 示 。 


万 法 语法 : text 

text (content) 

设置 所 有 包 著 元 素 的 文本 内 容 为 传 入 的 值 。 如 果 传 入 的 文本 包含 类 括号 (< 和 > ) 或 AND 符 

号 ( 色 )， 则 这 些 字符 会 被 替换 为 其 相应 的 HTML 实体 字符 9 

参数 

content (字符 串 | 函数 ) 要 设置 到 包装 元 素 中 的 文本 内 容 。 所 有 的 尖 括 号 字符 都 会 被 转 义 
为 HTML 实体 字符 。 如 果 参 数 是 一 个 函数 ， 则 为 每 个 包装 元 素 调用 此 函数 ， 设 
置 当前 元 素 为 函数 上 下 文 ,， 并 且 传 递 两 个 参数 : 元 素 的 下 标 和 元 素 现 有 的 文本 内 
容 。 函 数 的 返回 值 作为 新 的 内 容 

返回 值 


包装 集 





注意 ， 使 用 这 些 方法 设置 元 素 的 内 部 HTML 或 文本 ， 将 会 替换 掉 之 前 在 元 素 中 的 内 容 ， 
此 使 用 这 些 方法 必须 小 心 。 如 末 不 想 罗 希 元 素 原 先 的 全 部 内 容 , 还 有 很 多 其 他 的 方法 可 以 保持 元 
素 原本 的 内 容 不 变 ， 但 是 会 修改 它们 的 内 容 或 者 其 周围 的 元 素 "。 下 面 来 看 看 这 些 方法 。 

















3.3.2 ”移动 和 复制 元 率 


无 需 重新 加 载 页 面 就 可 以 对 页 面 上 的 DOM 元 素 进行 操作 ,这 让 创建 动态 的 和 可 交互 的 网 页 
成 为 可 能 。 我 们 已 经 看 到 了 jQuery 如 何 帮 助 动 态 地 创建 DOM 元 素 。 我 们 可 以 通过 各 种 方法 将 这 
些 新 元 系 沃 加 到 DOM 中 ， 也 可 以 移动 和 复制 现 有 元 系 。 

append () 方 法 可 以 用 来 追加 新 内 容 到 现 有 内 容 的 末尾 。 











GD <、> 和 & 的 实体 字符 分 别 是 &1t;、&gt; 和 &amp;。 
@) 保持 元 素 原 先 的 内 容 不 变 ， 但 是 可 以 向 其 中 添加 新 的 元 素 从 而 改变 其 内 容 。 
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5 夫 请 去， append 


append (content) 
将 传 入 的 HTML 片段 或 者 元 素 追 加 到 所 有 匹配 元 素 的 内 容 中 
参数 


content (字符 串 | 元 素 |jQuery | 函数 ) 一 个 字符 串 、 元 素 、 包 装 集 或 者 函数 ， 用 来 指定 要 
添加 到 和 包装 集 元 素 中 的 内 容 。 如果 参 数 是 一 个 函数 , 则 为 每 一 个 包装 元 素 调 用 此 
函数 ,设置 当前 元 素 为 函数 上 下 文 ， 并 且 传 递 两 个 参数 : 元 素 的 下 标 和 原先 的 内 
容 。 函 数 的 返回 值 作为 要 追加 的 内 容 

返回 值 


包装 集 








这 个 方法 接受 的 参数 包括 : 包含 HTML 片段 的 字符 串 ,对 现 有 或 新 创建 元 素 的 引用 ,或 jQuery 
元 素 包装 集 。 
考 不 如 下 的 简单 情况 : 


$s('p').append('<b>some text<b>'),; 


这 个 语句 从 传人 的 字符 串 创 建 HTML 片段 ， 将 其 妃 加 到 页 面 上 所 有 <p> 元 条 的 现 有 内 容 的 
末尾 。 
这 个 方法 更 复杂 的 用 法 是 获取 DOM 中 的 现 有 元 系 作 为 退 加 项 。 考 虑 如 下 代码 : 














$ ("Pp.appendToMe") .append($ ("a.appendMe")) 


这 个 语句 将 所 有 拥有 appendMe 类 的 链接 ， 移 动 到 所 有 拥有 appendToMe 类 的 <p> 元 素 的 子 
节点 列表 的 末尾 。 如 果 这 个 操作 有 多 个 目标 ， 则 会 复制 必要 数量 的 原始 元 素 副 本 ,并 追加 到 每 个 
日 标 元 素 的 子 节点 末尾 。 所 有 情况 下 ， 原 始 元 素 都 被 从 其 最 初 的 位 置 删 除了 。 

如 果 只 找到 一 个 目标 元 素 ,那么 这 种 操作 就 是 移动 操作 ; 原始 元 素 被 从 其 最 初 的 位 置 删除 了 ， 
并 且 出 现在 目标 元 素 子 节点 的 末尾 。 如 果 找 到 多 个 目标 元 素 , 则 这 种 操作 就 是 复制 移动 操作 ， 创 
建 足 够 数量 的 原始 元 素 副 本 以 便 将 其 追加 到 每 个 目标 子 市 点 的 末尾 。 

也 可 以 引用 指定 的 DOM 元 系 来 代 蔡 完整 的 包装 集 。 如 下 所 示 : 


















































$ ("Pp.appendToMe") .append (someElement).; 


添加 元 系 到 元 北 内 容 的 末尾 是 一 个 背 见 操作 (可 能 需要 添加 一 个 列表 项 到 列表 的 末尾 , 添加 
一 行 到 一 个 表格 的 末尾 ， 或 者 添加 一 个 新 元 素 到 文档 主体 的 末尾 )， 然 而 还 可 能 需要 将 新 建 的 或 
现 有 的 元 又 添加 到 目标 元 素 内 容 的 开始 位 置 。 

当 这 样 的 需求 出 现时 ，prepena () 方 法 就 能 派 上 用 场 了 。 
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DD 不 ， prepend 


prepend (content) 

将 传 入 的 HTML 片段 或 者 元 素 添 加 到 所 有 匹配 元 素 的 内 容 的 开头 

参数 

content “ (字符 串 | 元 素 jQuery| 函 数 ) 一 个 字符 串 、 元 素 、 包 装 集 或 者 函数 ， 用 来 指定 要 


添加 到 包装 wow 则 为 每 一 个 包装 元 素 调 用 
此 函数 ea 前 元 素 为 函数 上 下 文 ， 并 且 传 递 两 个 参数 : 元 素 的 下 标 和 之 前 
的 内 容 。 马 数 的 返回 值 作为 要 添加 的 内 容 











有 时 候 , 我 们 可 能 需要 将 元 素 放置 到 其 他 地 方 ， 而 不 是 元 素 内 容 的 开头 或 者 末尾 。jQuery 允 
许 我 们 通过 识别 一 个 目标 元 素 并 将 源 元 素 放置 到 目标 元 素 的 前 面 或 者 后 面 , 从 而 把 新 创建 的 或 者 
现 有 的 元 素 放置 到 DOM 中 的 任意 位 置 

这 些 方法 被 命名 为 before () 和 after () 不 足 为 奇 。 现 在 你 应 该 很 熟悉 它们 的 语法 了 。 

















D3 A before 
before (content) 
将 传 入 的 HTML 片段 或 者 元 素 插 入 为 目标 元 素 的 兄弟 节点 ， 位 于 目标 元 素 之 前 。 目 标 包装 元 
素 必 须 已 经 受 是 DOM 的 一 部 分 


参数 

content (字符 串 | 元 素 |jQuery | 函数 ) 一 个 字符 串 、 元 素 、 包 装 集 或 者 函数 ， 用 来 指定 要 
添加 到 DOM 中 目标 包装 集 元 素 之 前 的 内 容 。 人 《是 一 个 函数 ， 则 为 每 一 人 
包装 元 素 调 用 此 函数 ， 传 递 当 前 元 素 作为 函数 上 下 文 。 函 数 的 返回 值 作 为 要 插 
入 的 内 容 

返回 值 

包装 全 


ea 这 些 操作 方法 对 于 在 页 面 上 高 效 地 使 用 DOM 非常 关键 。 我 们 提供 了 一 个 移动 与 复制 实验 室 
页 面 ， 你 可 以 利用 它 多 加 练习 ， 确 保 完 全 理解 这 些 操 作 方 法 。 这 个 实验 室 页 面 可 以 从 
chapter3/move.and.copy.lab.html 获取 ， 其 初始 显示 如 图 3-4 所 示 。 
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方法 语法 : after 
after (content) 
将 传 入 的 HTML 片段 或 者 元 素 揪 入 为 目标 元 素 的 同 级 节点 ， 位 于 目标 元 素 之 后 。 目 标 包 
素 必 须 已 经 是 DOM 的 一 部 分 





参数 

content 函数 ) 一 个 字符 串 、 元 束 、 包 装 集 或 者 函数 ， 用 来 指定 
DON 后 的 和 一个 ss 

装 元 素 调 用 此 函数 , 传递 当前 元 素 为 函数 上 下 文 。 函 数 的 返回 值 作为 要 插入 的 

本 

返回 值 

包装 集 
BoOO Move and Copy Lab Page | 
RO hp//ocahoswjaiaz/chapter3/lab.move.and.copy.himl a-cooe 





jQuery Move and Copy Lab Page 











@ append OO prepend OQ before OQ after 
Clone?: 


© no O yes 
Execute | 








图 3-4 移动 与 复制 实验 室 页 面 可 以 观察 DOM 操作 方法 的 运行 情况 
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实验 室 页 面 左 侧 的 面板 包含 3 张 图 片 ， 可 以 作为 移动 /复制 测试 的 源 元 杂 。 选 择 图 片 相应 的 
复 选 框 以 选中 一 张 或 者 多 张 图 片 。 

移动 /复制 操作 的 目标 元 素 在 右 侧面 板 中 ， 也 是 通过 复 选 框 选中 的 。 在 面板 的 底部 控制 按钮 
人 允许 我 们 从 这 四 种 操作 中 选择 一 种 来 应 用 : append、prepend 、before 或 after。( 现在 可 以 先 忽 略 
clone， 我 们 会 在 后 面 介 绍 。) 

单 击 Execute 按钮 会 引发 这 个 操作 : 使 用 指定 的 操作 将 选中 的 源 图 片 应 用 到 由 选中 的 目标 元 
紊 集 组 成 的 包装 集中 。 上 述 操作 完成 后 ，Execute 按钮 将 替换 成 一 个 Restore 按钮 ， 我 们 可 以 使 用 
这 个 按钮 将 一 切 归 位 以 便 运 行 男 一 个 实验 。 

六 接 下 来 运行 一 个 append 实验 。 

选中 小 狗 图 片 ， 然 后 再 选中 Target 2。 选 择 append 操作 ， 单 击 Execute 按钮 。 结 果 如 图 3-5 

所 示 。 





BoOO Move and Copy Lab Page 三 用 


3 np://localhost/jqia2/chapter3/lab.move.and.copy.html SQA Coogle 











Operation: 

") append prepend before after 
Clone?: 

*) no yes 


Restore | 


图 3-5”append 操作 使 得 Cozmo 被 添加 到 了 Target 2 的 尾部 


使 用 移动 /复制 实验 室 页 面 来 尝试 源 、 目 标 ， 以 及 这 四 种 操作 的 各 种 组 合 ， 确 保 你 熟悉 它们 
的 运行 方式 。 
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有 时 候 ， 如 果 能 够 反 转 传人 到 这 些 操作 的 元 素 顺 序 ,， 那 就 能 使 代码 更 加 易 谈 。 另 一 种 将 元 素 
从 一 个 地 方 移动 或 复制 到 另 一 个 地 方 的 方法 ， 是 将 源 元 素 包 右 起 来 〈 而 不 是 目标 元 素 )， 然 后 在 
方法 的 参数 中 指定 目标 元 素 。 噢 ,jQuery 也 允许 我 们 这 么 做 ,利用 与 刚 探讨 过 的 四 种 方法 类 似 的 
操作 就 可 以 反 转 源 元 素 和 目标 元 素 的 顺序 。 这 些 操 作 是 appendTo() 、prependTo()、 
insertBefore() 和 insertAfter()， 它 们 的 语法 如 下 所 示 。 




















i 冯 : appendTo 





appendTo (targets) 
将 包装 集中 的 所 有 元 素 追 加 到 指定 目标 元 素 内 容 的 末尾 
参数 
targets (字符 串 | 元 素 ) 包含 jQuery 选择 器 的 字符 串 , 或 者 DOM 元素。 包装 集中 的 所 

有 元 素 都 会 被 追加 到 每 个 目标 元 素 内 容 的 末尾 
返回 值 
包装 集 

河 二 辣 二 : prependTo 

prependTo (targets) 
将 包装 集中 所 有 的 元 素 添加 到 指定 目标 元 素 内 容 的 开头 
参数 


targets (字符 囊 | 元 素 ) 包含 jQuery 选择 器 的 字符 囊 , 或 者 DOM 元素。 包装 集中 的 所 有 
元 素 都 会 被 添加 到 每 个 目标 元 素 内 容 的 开头 


方法 语法 : insertBefore 
insertBefore(targets) 
将 包装 集中 的 所 有 元 素 添加 到 DOM 中 指定 目标 元 素 的 前 面 
参数 
targets (字符 囊 | 元 素 ) 包含 jQuery 选择 器 的 字符 囊 , 或 者 DOM 元素。 包装 集中 的 所 有 
元 素 都 会 被 添加 到 每 个 目标 元 素 的 前 面 
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方法 语法 : insertAfter 
insertAfter(targets) 
将 包装 集中 所 有 的 元 素 添加 到 DOM 中 指定 目标 元 素 的 后 面 
参数 
targets ( 字符 事 | 元 素 ) 包含 jQuery 选择 器 的 字符 串 ， 或 者 DOM 元素。 包装 集中 的 所 
有 元 素 都 会 被 添加 到 每 个 目标 元 素 的 后 面 
返回 值 


包装 集 


在 继续 学 习 前 我 们 还 需要 说 明 一 件 事情 …… 

还 记得 上 一 章 讲 过 如 何 使 用 jQuery 的 $() 包 装 大 图 数 来 创建 新 的 HTML 户 段 吗 ? 当 它 和 
appendTo() 、prependTo()、insertBefore() 和 insertAftez() 方 法 一 起 使 用 时 ， 将 是 非常 
有 用 的 技巧 。 考 虑 如 下 代码 : 

$('<p>Hi there!</p>') .insertAfter('p img'); 

这 个 霹 句 创建 一 个 友好 的 段落 , 并 将 其 副本 插入 到 段落 元 素 内 每 个 图 片 元 系 的 后 面 。 这 是 一 
个 习惯 用 法 ， 我 们 已 经 在 列表 2-1 中 见 过 ,会 经 常 在 页 面 中 使 用 它 。 

有 时 候 ， 我 们 并 不 想 把 元 系 插 入 到 其 他 元 系 中 ， 而 是 需要 做 相反 的 操作 。 下 面 看 看 jQuery 
为 此 提供 了 哪些 功能 。 


3.3.3” 包 申 与 肥 包 下 元 素 


为 一 种 经 常 害 要 执行 的 DOM 操作 类 型 是 ， 在 茶 个 标记 中 包 囊 一 个 元 系 〈 或 一 系列 元 系 )。 
例如 ， 我 们 可 能 想 要 将 所 有 市 有 茶 个 类 的 链接 包 右 到 一 个 <qaiv> 中 。 可 以 使 用 jQuery 的 wrap () 
方法 来 完成 这 个 DOM 修改 操作 。 它 的 语法 如 下 所 示 。 




















2 店 到: wrap 


wrap (wrapper) 
使 用 传 入 的 HTML 标签 或 元 素 的 副本 将 匹配 集中 的 元 素 包 裹 起 来 
参数 


wrapper (字符 串 | 元 素 ) 一 个 包含 元 素 开始 和 结束 标签 的 字符 串 ， 用 来 包裹 匹配 集中 的 每 
个 元 素 ; 或 者 一 个 元 素 ， 其 副本 将 用 作 和 包装 器 
返回 值 
包装 集 
要 在 带 有 hello 类 的 <div> 中 将 所 有 拥有 surprise 类 的 链接 分 别 包 里 起 来 ， 可 以 这 么 写 : 


$s ("a.surprise'") .wrap("<div class='hello'></div>") 
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如 于 想 使 用 页 面 上 的 第 一 个 <aiv> 元 素 的 副本 将 这 些 链接 包 右 起 来 ， 可 以 这 人 么 写 : 

和 汪汪 人 0 Wrap "ov iiret") [0 

如 打包 闭 集 中 有 多 个 元 系 ， 则 wrap () 方 法 会 分 别 应 用 到 每 个 元 系 上 。 如 末 想 要 将 包 交 集中 
的 全 部 元 素 作 为 一 个 整体 包 右 起 来 ， 则 可 以 改 用 wrapal1 () 方 法 : 














方 沁 同 六: wrapAll 
WrapAll (wrapper) 
使 用 传 入 的 HTML 标签 或 者 元 素 的 副本 ,将 匹配 集中 的 元 素 作为 一 个 整体 包 庄 起 来 
参数 
wrapper (字符 事 | 元 素 ) 一 个 包含 元 素 开始 和 结束 标签 的 字符 事 ， 用 来 包 衰 匹配 集中 的 
每 个 元 素 ; 或 者 一 个 元 素 ， 其 副本 将 用 作 和 包装 器 











有 时 候 , 我 们 想 包 囊 的 不 是 匹配 集中 的 元 素 ， 而 是 这 些 元 素 的 内 容 。 在 这 种 情 部 下， 就 可 以 
使 用 wrapInner () 方 法 。 


方法 语法 : WrapInner 
wrapInner (wrapper) 
使 用 传 入 的 HTML 标签 或 者 元 素 的 副本 , 将 匹配 集中 的 元 素 内 容 ( 包含 文本 节点 ) 包 庄 起 来 
参数 
wrapper (字符 串 | 元 素 ) 一 个 包含 元 素 开 始 和 结束 标签 的 字符 串 ， 用 来 包 训 匹配 集中 的 
每 个 元 素 ; 或 者 一 个 元 素 ， 其 副本 将 用 作 包 装 器 





其 反 癌 操作 (也 就 是 删除 子 元 又 的 父 节 点 ) 可 以 通 过 unwrap ( () 方 法 来 完成 。 


方法 语法 : unwrap 


Unwrap() 


删除 包装 元 素 的 父 元 素 。 子 元 素 和 其 所 有 的 同 级 节点 一 起 替换 了 DOM 中 的 父 元 素 
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现在 ,我们 已 经 知道 了 如 何 创建 、 包 囊 、 反 包 囊 、 复 制 和 移动 元 素 ， 那 如 何 删除 页 面 上 的 元 
素 呢 ? 


3.3.4 删除 元 素 


和 沃 加 、 和 移动、 复制 DOM 中 的 元 系 同 样 重要 的 功能 是 删除 不 再 需要 的 元 系 。 
如 打 想 清空 或 者 删除 一 组 元 素 ， 可 以 使 用 remove () 方 法 ， 它 的 语法 如 下 所 示 。 





方法 语法 : remove 
remove (selector) 
从 页 面 DOM 中 删除 包装 集中 的 所 有 元 素 
参数 
selector ( 字符 串 ) 一 个 可 选 的 选择 器 ， 可 以 用 来 进一步 过 滤 包 装 集中 要 删除 的 元 素 











注意 ， 和 很 多 其 他 的 jQuery 方法 一 样 ， 这 个 方法 的 返回 结 采 也 是 包 疤 集 。 从 DOM 中 删除 的 
元 素 依 然 可 以 通过 这 个 集合 来 引用 ( 因此 不 符合 垃圾 回收 条 件 )， 可 以 使 用 其 他 jQuery 方法 进 一 
步 操作 ， 包 括 appendTo()、 prependTo()、 insertBefore()、 insertAfter!\( ) 以 及 其 他 类 似 
的 方法 。 

尽管 如 此 ， 在 使 用 remove () 从 DOM 中 删除 元 素 时 要 注意 ， 绑 定 到 元 系 上 的 任何 jQuery 数 
据 或 事件 也 会 被 同时 删除 。detcn() 与 此 类 似 ， 也 可 以 用 来 从 DOM 中 删除 元 素 ， 但 是 会 保留 绑 
定 的 事件 和 数据 。 

















方法 语法 : detach 
detach (selector) 
从 页 面 DOM 中 删除 包装 集中 的 所 有 元 素 ， 保 留 绑 定 的 事件 和 jQuery 数据 
参数 
selector ( 字符 串 ) 一 个 可 选 的 选择 器 字符 串 ， 用 来 进一步 过 滤 包 装 集中 要 删除 的 元 素 


如 果 想 在 删除 元 素 后 ， 再 把 它 放 回 到 DOM 中 并 且 保 持 其 事件 和 数据 的 完整 ， 那 么 首选 
detach() 方 法 。 
使 用 empty () 方 法 可 以 完全 清空 DOM 元 素 的 内 容 ， 甚 语法 如 下 所 示 。 
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7 | 和 去 : empty 
empty ( ) 
删除 匹配 集中 所 有 DOM 元 素 的 内 容 
参数 
无 ; 
返回 值 
佳 














有 时 候 ， 我 们 不 想 移 动 元 系 ， 而 是 想 要 复制 它们 …… 
3.3.5 复制 元 率 


操作 DOM 的 另外 一 种 方式 是 创建 元 素 的 副本 , 并 把 它们 添加 到 DOM 树 的 其 他 地 方 。jQuery 
提供 了 一 个 方便 的 包 竣 表 方 法 clone () 来 完成 上 述 操作 。 








万 法 语法 : clone 
clone (copyHandlers) 
创建 包装 集中 元 素 的 副本 ， 并 返回 包含 这 些 副 本 的 新 包装 集 。 这 些 元 素 和 任何 子 节点 都 会 被 
复制 。 是 否 复制 事件 处 理 器 取决 于 copyHandlers 参数 的 设置 
参数 
copyHandlers (布尔 ) 如 果 参 数 是 true， 则 复制 事件 处 理 器 。 如 果 参 数 是 false 或 者 
被 省 略 ， 则 不 复制 事件 处 理 器 
返回 值 
新 建 的 包装 集 





使 用 clone () 创建 现 有 元 素 的 副本 用 处 并 不 是 很 大 , 除非 我 们 对 那些 副本 进行 一 些 操作 。 一 
般 来 说 ， si E 集 , 我 们 就 可 以 应 用 另 一 个 jQuery 方法 把 它们 放置 到 DOM 中 
的 某 个 地 方 。 例 如 : 


$('img').clone() .appendTo('fieldset .photo'); 
这 个 语句 创建 所 有 图 片 元 双 的 副本 ,并 把 它们 妃 加 到 所 有 带 有 类 名 photo 的 <fieldset> 元 
素 中 。 
一 个 稍微 复 洒 的 例子 如 下 所 示 : 
$('ul').clonel() .insertBefore('#here'); 


这 个 方法 链 执行 类 似 的 操作 ， 但 是 复制 操作 的 目标 (所 有 的 <ul> 元 素 ) 都 会 被 复 制 ， 包 括 
其 子 闻 点 (任何 <ul> 元 系 都 有 可 能 包含 一 些 <11> 子 节点 )。 
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最 后 一 个 例子 : 

s(ul') .clone() .insertBefore('#here') .end() .hide(); 

这 个 语句 执行 的 操作 和 前 一 个 例子 相同 , 但 是 在 插入 副本 之 后 , 会 利用 ena() 方 法 来 选择 原 
始 包 装 集 ( 原始 的 目标 元 素 ) 并 隐藏 它们 。 这 个 示例 曾 明 了 复制 操作 如 何 创 建 包 含 一 组 新 的 元 素 
的 包装 集 。 

为 了 动态 地 查看 复制 操作 ， 请 返回 到 移动 与 复制 实验 室 页 面 。 在 Execute 按钮 的 上 方 是 一 对 

> 单 选 按钮 ， 它 允许 我 们 将 复制 操作 作为 主要 的 DOM 处 理 操作 的 一 部 分 。 当 选中 yes 单 选 按钮 时 ， 
源 元 系 会 在 append、prepend、before 或 者 after 方 法 执行 之 前 被 复制 。 

在 启用 复制 的 情况 下 , 重复 一 些 之 前 进行 的 实验 , 注意 观察 这 些 操作 是 如 何 影 响 原 始 的 源 元 
素 的 。 

我 们 可 以 插入 、 删 除 和 复制 元 素 。 组 合 使 用 这 些 操作 可 以 很 容易 地 完成 更 高 级 的 操作 ， 比 如 
蔡 换 。 不 过 这 其 实 没 有 你 想 的 那么 麻烦 。 


3.3.6 ”替换 元 素 


有 了 时候 , 我 们 需要 使 用 新 元 素来 蔡 换 现 有 元 系 , 或 者 移动 现 有 元 素 以 取代 男 一 个 元 素 , jQuery 
为 此 提供 了 replaceWwith() 方 法 。 














方法 古 法 : replaceWith 

replaceWith(content) 

使 用 指定 的 内 容 替 换 每 个 匹配 元 素 

参数 

content (字符 串 | 元 素 | 函 数 ) 一 个 包含 HTML 片段 的 字符 串 ， 作 为 将 要 替换 的 内 容 ; 
或 者 一 个 元 素 的 引用 ， 它 会 被 移动 并 替换 现 有 的 元 素 。 如 果 参 数 是 一 个 函数 ， 
则 为 每 个 包装 元 素 分 别 调用 此 函数 ， 设 置 当前 元 素 为 函数 上 下 文 ,并 且 不 传递 
任何 参数 。 函 数 的 返回 值 作为 新 的 内 容 

返回 值 

包含 被 替换 元 素 的 jQuery 包装 集 


假设 在 特定 情况 下 ,我 们 希望 使 用 包含 图 片 alt 值 的 <span> 元 素来 替换 页 面 上 所 有 拥有 alt 
值 的 图 片 。 使 用 sach () 和 replacewith() 可 以 这 样 来 实现 ; 


Ss('jmglalt]') .each (function()t 
$s (this) .replaceWith('<span>'+ S(this) .attr('alt') +'</span>') 
}); 


each () 方 法 允许 我 们 过 历 每 一 个 匹配 元 素 ，replacewith () 将 网 片 蔡 换 为 生成 的 <span> 元 素 。 

如 果 我 们 想 继续 使 用 这 些 元 素 而 不 是 直接 丢弃 它们 ， 则 可 以 使 用 replacewith () 方 法 返回 
一 个 包含 从 DOM 中 删除 的 元 系 的 jQuery 包装 集 。 作为 练习 , 请 思考 如 何 扩 展 这 个 示例 代码 以 便 
将 那些 已 删除 的 元 泰 重新 添加 到 DOM 中 的 其 他 地 方 。 
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当 癌 replaceWith() 传 入 一 个 现 有 元 素 时 ， 该 元 条 首先 会 从 DOM 中 的 原始 位 置 删除 ， 
然后 再 重新 添加 以 替换 目标 元 素 。 如 果 有 多 个 这 样 的 目标 元 素 ， 则 会 复制 足够 数量 的 原始 元 素 
副本 。 

有 了 时， 凑 倒 replacewith() 指 定 的 元 素 顺 序 会 很 方便 ， 以 便 使 用 匹配 选择 需 指 定 用 来 替换 
的 元 素 。 我 们 已 经 看 到 过 类 似 的 互补 的 方法 ， 比 如 appenda() 和 appendTo()， 它 们 允许 我 们 指 
定 最 适合 代码 的 元 素 顺 序 。 

类 似 地 ，replacewith() 方 法 的 镜像 方法 是 *eplaceAl11() ， 它 允许 我 们 执行 类 似 的 操作 ， 
但 是 以 相反 的 顺序 来 指定 元 素 。 




















9 replaceAll 
replaceAll (selector) 


使 用 调用 此 方法 的 匹配 集 的 内 容 ， 替 换 所 有 与 传 入 的 选择 器 相 匹 配 的 元 素 


参数 
selector (选择 器 ) 一 个 选择 器 字符 串 表 达 式 ， 用 来 识别 要 被 替换 的 元 素 
返回 值 


包含 插入 元 素 的 jQuery 包装 集 


和 repblaceWith () 一 样 ，repblaceAll() 也 返回 一 个 jQuery 包装 集 。 但 是 这 个 集合 包含 的 
不 是 被 蔡 换 抒 的 元 素 ， 而 是 用 来 替换 的 元 系 。 被 奉 换 的 元 素 已 经 丢失 ， 因 此 不 能 对 其 进行 进一步 
操作 。 当 你 决定 使 用 哪 种 蔡 换 方法 时 ,一定 要 考虑 到 这 一 点 

现在 ,我 们 已 经 讨论 了 如 何 处 理 一 般 的 DOM 元 素 ， 接 下 来 简单 看 下 如 何 处 理 一 种 特殊 类 型 
的 元 素 : 表单 元 素 。 


3.4 ”处 理 表 单元 素 值 


因为 表单 元 又 拥 有 特殊 的 属性 ， 所 以 jQuery 核心 包含 很 多 便捷 的 函数 来 完成 如 下 操作 : 

口 获取 和 设置 表单 元 素 的 值 ; 

口 序列 化 表单 元 素 ; 

口 基于 表单 特定 的 属性 选择 元 素 。 

这 些 羡 数 在 大 部 分 情况 下 可 以 很 好 地 为 我 们 服务 ， 不 过 表单 插件 〈 一 个 由 jQuery 核心 团队 
成 员 开 发 的 官方 文 持 的 插件 ) 提供 了 更 多 与 表单 相关 的 功能 。 有 关 这 个 插件 的 更 多 内 容 可 以 从 这 
里 获取 : http://jquery.malsup.com/form/。 
































什么 是 表单 元 素 
当 我 们 使 用 术语 “表单 元 素 ” 时 , 指 的 是 那些 出 现在 表单 内 部 的 元 素 , 拥有 name 和 value 
特性 ， 并且 在 提交 表单 时 ,它们 的 值 会 作为 HTTP 请 求 参 数 发 送 到 服务 器 。 在 脚本 中 手工 处 理 
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这 些 元 素 是 需要 技巧 的 ,因为 不 仅 可 以 禁用 元 素 ,而 且 W3C 还 为 控件 定义 了 一 个 失败 的 状态 2。 
这 个 状态 决定 了 在 提交 过 程 中 应 该 忽略 哪些 元 素 ， 而 这 仅仅 是 复杂 面 的 一 小 部 分 。 








看 看 在 表单 元 条 上 进行 的 最 帝 见 的 一 种 操作 : 访问 它 的 值 。 jQuery 的 val () 方 法 考虑 了 最 篆 
见 的 情况 ， 返 回 包 妆 集 中 的 第 一 个 表单 元 系 的 value 特性 。 其 语法 如 下 所 示 。 








I val 
vall() 
返回 匹配 集中 第 一 个 元 素 的 value 特性 。 如 果 此 元 素 是 一 个 可 以 多 选 的 元 素 时 ， 返 回 值 是 所 
有 选择 项 所 组 成 的 数组 ” 
参数 
pa 
返回 值 
获取 的 值 





虽然 这 个 方法 非常 有 用 , 但 是 它 也 有 一 些 限 制 需 要 我 们 注意 。 如 果 包 波 集 中 的 第 一 个 元 素 不 
是 一 个 表单 元 素 ， 则 会 返回 一 个 空 字 符 串 ， 这 并 不 是 我 们 真正 需要 的 值 (undefined 或 许 会 更 
清楚 些 )。 这 个 方法 也 不 区 分 复 选 框 和 单 选 按钮 的 选中 或 非 选 中 状态 ， 只 是 简单 地 返回 由 它们 的 
value 特性 所 定义 的 什 ， 而 无 论 它 们 是 否 被 选中 。 

对 于 单 选 按钮 ， 组 合 使 用 jQuery 选择 器 和 val () 方 法 的 能 力 足 够 扭转 局 面 ， 我 们 已 经 在 本 
书 的 第 一 个 例子 中 看 到 过 。 考虑 包含 名 为 radioGroup 的 单 选 按钮 分 组 ( 一 组 名 称 相 同 的 单 选 按 
钮 ) 的 表单 ， 以 及 下 面 的 表达 式 : 

$s('[name="radioGroup"] :checked') .val () 

这 个 表达 式 返 回 唯一 选中 的 单 选 按钮 的 信 ( 如 条 没有 选中 任何 单 选 按钮 ， 则 返回 
undefined )。 这 比 过 历 按钮 来 查找 选中 的 元 素 和 价 单 多 了 ， 不 是 吗 ? 

由 于 val() 只 考虑 包 痰 集中 的 第 一 个 元 素 ， 因 此 并 不 适用 于 可 能 选中 多 个 控件 的 复 选 框 分 
组 。 然 而 jQuery 是 不 会 让 我 们 孤立 无 援 的 。 考 虑 如 下 代码 : 





























Var checkboxValues = S$S('[name="checkboxCroup"] :checked') .map ( 
function(){ return S$(this) .val(); } 
) .toArray().; 





尽管 我 们 还 没有 正式 学 习 如 何 扩展 jQuery ( 详 见 第 7 章 )， 不 过 你 已 经 看 了 很 多 示例 代码 ， 
不 妨 小 试 牛刀 。 看 看 你 能 否 将 前 面 的 代码 重 构成 一 个 jQuery 包装 器 方法 ， 用 来 返回 由 包装 集中 











Q 关于 表单 中 哪些 控件 是 可 以 提交 的 ， 请 参考 W3C 网 站 http://www.w3.org/TR/html4/interact/forms.html 的 13.2 节 的 


内 容 。 
@) 比如 <select id="list" multiple="multiple">， 则 表达 式 $ ("#1list") .val() 返 回 包含 一 个 或 多 个 元 
素 的 数组 。 
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任何 选中 的 复 选 框 组 成 的 数组 。 

虽然 val () 方 法 能 够 非常 出 色 地 获取 任何 单个 的 表单 控件 元 系 的 值 , 但 是 如 有 末 硕 望 通过 提交 
表单 来 获取 一 套 完 整 的 值 ， 最 好 使 用 serialize() 和 serializeArray () 方 法 ( 详 见 第 8 童 ) 
或 者 官方 表单 插件 。 

男 一 个 常见 操作 是 设置 一 个 表单 元 素 的 值 。 只 需 提 供 一 个 值 ，val () 方 法 就 可 以 实现 这 个 目 
的 。 其 语法 如 下 所 示 。 

















SET SS 





val (value) 


设置 传 入 的 值 为 所 有 匹配 的 表单 元 素 的 value 


参数 

value ( 字符 事 | 函 数 ) 指定 一 个 值 ， 将 其 设置 为 包装 集中 每 个 表单 元 素 的 value 属性 。 
如 果 参 数 是 个 函数 ,， 则 为 包装 集中 每 个 元 素 分 别 调用 此 函数 , 设置 当前 元 素 为 函 
数 上 下 文 ,， 传递 两 个 参数 : 元 素 下 标 和 元 素 的 当前 值 。 函 数 的 返回 值 作为 要 设置 
的 值 

返回 值 

包装 集 





val () 方 法 的 为 一 个 用 途 是 选中 复 选 框 或 者 单 选 按 钮 元 素 , 或 者 选择 <select> 元 素 中 的 可 选 
项 。 val () 的 这 个 变 体 的 语法 如 下 所 示 。 


方法 语法 : val 
val (values) 
导致 包装 集中 任何 复 选 框 、 单 选 按钮 或 者 <select> 元 素 的 可 选项 变 成 选中 ( checkedq ) 或 者 
选择 ( selected) 状态 ， 只 要 它们 值 匹配 传 入 的 values 数组 中 的 任何 一 个 值 
参数 
values (数组 ) 一 个 数组 ， 用 来 确定 应 该 选中 或 者 选择 哪些 元 素 
返回 值 


包装 集 


考 夸 下 面 这 个 十 句 : 

$s('input,select').val(['one', 'two', 'three']); 

这 个 语句 会 搜索 页 面 上 所 有 的 <input> 和 <select> 元 素 ， 只 要 这 些 元 素 的 值 与 输入 字符 串 
‘one' 、'two' 或 者 'three' 任 何 一 个 相 匹 配 。 任 何 匹 配 的 复 选 框 或 者 单 选 按钮 部 会 变 成 选中 状 
态 ， 而 任何 匹配 的 可 选项 将 会 变 为 选择 状态 。 
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这 使 得 val () 的 用 途 不 仅仅 局 限于 处 理 基于 文本 的 表单 元 素 。 


3.5 ”小结 


在 本 草 中 , 我 们 超越 了 选择 元 素 的 技术 并 且 开 始 操作 元 素 。 利 用 目前 所 学 的 技术 , 我们 可 以 
使 用 强大 的 条 件 来 选择 元 素 ， 然 后 将 它们 移动 到 页 面 的 任意 部 位 ， 就 像 做 外 科 手 术 那 样 。 

我 们 可 以 选择 复制 、 移 动 、 符 换 元 系 , 甚至 从 头 创建 全 新 的 元 系 。 可 以 在 页 面 上 追加 、 前 置 、 
包 右 任意 元 系 或 者 元 素 集 。 我 们 还 学 习 了 如 何 管 理 表 单元 素 的 值 , 所 有 这 一 切 都 通 向 强大 而 人 简洁 
的 逻辑 。 

有 了 这 些 基础 知识 , 我 们 准备 这 人 学 习 更 多 的 高 级 概 售 ， 下 面 就 从 典型 的 、 环 手 的 页 面 事件 
处 理 开 始 。 
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事件 处 理 


本 章 内 容 

口 浏览 器 实现 的 事件 模型 

D jQuery 事件 模型 

口 为 DOM 元 素 绑 定 事 件 处 理 需 
口 Event 对 象 实例 

口 在 脚本 控制 下 触发 事件 处 理 需 
口 预先 注册 事件 处 理 天 





熟悉 百老汇 的 歌舞 剧 Cabaret《 歌 厅 》 以 及 其 同名 好 莱 坞 电影 的 任何 人 ,可 能 会 记得 “Money 
Makes the World Go Around”( 有 人 钱 能 使 鬼 推 磨 ) 这 首 歌 。 这 一 金钱 万 能 的 观点 适用 于 物质 世界 ， 
在 虚拟 的 万 维 网 王国 里 ， 正 是 事件 使 这 一 切 运行 起 来 的 ! 

类 似 于 其 他 GUI 管理 系统 ，HTML 网 页 呈现 的 界面 是 异步 的 和 事件 驱动 的 (即使 用 来 将 页 
面 传送 给 浏览 器 的 HTTP 协议 本 质 上 是 完全 同步 的 ) 无论 GUI 是 使 用 Java Swing 、X11 或 者 .NET 
Framework 实现 的 加 面 程序 , 还 是 Web 应 用 中 使 用 HTML 和 JavaScript 实现 的 网 页 ,程序 的 步 又 
基本 上 都 是 一 样 的 : 

(1) 建立 用 户 界面 ; 

(2) 等 待 有 趣 的 事情 发 生 ; 

(3) 做 出 相应 的 反应 ; 

(4) 转 到 第 (2) 步 。 

步 又 (1) 创 建 用 户 界面 的 显示 ， 其 他 步骤 定义 用 户 界 面 的 行为 。 在 Web 页 面 中 , 浏览 右 人 负责 创 
建 显 示 界 面 来 响应 发 送 给 它 的 标记 (HTML 和 CSS )。 网 页 中 包含 的 脚本 定义 了 显示 界面 的 行为 。 

这 些 脚 本 以 事件 处 理 器 的 形式 存在 (也 被 称 为 监听 器 )， 它 们 负责 对 页 面 显示 时 发 生 的 各 种 
事件 做 出 响应 。 这 些 事件 可 能 是 系统 生成 的 〈 比如 定时 圳 或 者 完成 异步 请 求 )， 但 是 大 部 分 是 用 
户 操作 的 结果 〈 比如 移动 或 单 击 鼠标 ， 通 过 键盘 输入 文本 ， 甚 至 是 iPhone 的 手势 )。 如 果 没 有 对 
这 些 事 件 的 啊 应 能 力 ， 万 维 网 的 最 大 用 途 可 能 会 仅 限 于 显示 一 些小 猫 的 照片 。 

虽然 HTML 本 二 确实 定义 了 少数 几 个 无 需 我 们 编写 脚本 来 实现 的 内 置 的 语义 动作 比如 单 
击 销 点 标记 ( <a> ) 后 重新 加 载 页 面 或 者 通过 单 击 提交 按钮 来 提交 表单 ), 但 是 要 想 让 页 面 展 示 任 
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何其 他 行为 ， 就 需要 处 理 用 户 和 页 面 交互 时 产生 的 各 种 事件 。 

在 本 章 中 , 我 们 将 探讨 浏览 器 公开 这 些 事件 的 各 种 方式 , 如 何 创建 处 理 器 以 便 对 发 生 的 事件 
做 出 响应 ,以 及 如 何 应 对 由 于 浏览 器 事件 模型 的 差异 而 带 来 的 诸多 挑战 .然后 ,我 们 将 看 到 jQuery 
是 如 何 穿 透 这 层 由 浏览 器 而 导致 的 迷雾 ， 从 而 帮助 我 们 分 担 重负 的 。 

下 面 开始 研究 浏览 器 如 何 公开 其 事件 模型 。 








你 需要 知道 的 JavaScript 

jQuery 为 Web 应 用 开发 带 来 的 一 个 最 大 的 好 处 就 是 ， 无 需 动 手 编写 一 大 挫 脚 本 就 能 实现 
大 量 的 脚本 行为 。jQuery 处 理 了 具体 的 细节 ， 因 此 只 需 关注 Web 应 用 需要 实现 的 功能 即 可 ! 

目前 为 止 ， 我 们 的 学 习 之 旅 是 相当 顺利 的 。 只 需 基本 的 JavaScript 技 能 就 能 编写 和 理解 前 
面 几 章 介绍 的 jQuery 示例 。 但 在 本 章 和 随后 的 几 章 中 ,你 必须 理解 几 个 重要 的 JavaScript 基础 
概念 才能 有 效 地 使 用 jQuery 库 。 

可 能 由 于 你 的 技术 背景 , 你 已 经 熟悉 了 这 些 概 念 , 但 即便 是 有 些 页 面 开 发 者 没 能 牢固 地 学 
握 这 些 概 念 ， 他 们 也 能 够 编写 出 大 量 的 代码 一 一 一 切 有 赖 于 JavaScript 的 高 度 灵 活性 。 在 继续 
学 习 之 前 ， 应 该 确保 你 已 经 牢 牢 掌握 了 这 些 核心 概念 。 

如 果 已 经 熟悉 了 JavaScript 对 象 和 函数 类 的 工作 方式 ， 并 且 也 充分 了 解 函 数 上 下 文 和 闭 包 
的 概念 ， 那 么 你 可 以 继续 阅读 本 草 及 接 下 来 的 几 章 。 如 果 对 这 些 概 念 感到 陌生 或 者 模糊 的 话 ， 
强烈 建议 你 转 到 附录 ， 它 可 以 帮助 你 加 速 理解 这 些 必 备 的 概念 。 


4.1 浏览 器 的 事件 模型 


早 在 有 人 考虑 如 何 标 准 化 浏览 旨 事 件 处 理 之 前 ， 网 景 通信 公司 ( Netscape Communications 
Corporation ) 就 在 其 网 景 领航 员 ( Netscape Navigator ) 浏览 器 中 引入 了 一 个 事件 处 理 模型 。 所 有 
的 现代 浏览 硕 依 然 文 持 这 种 模型 , 它 可 能 是 大 多 数 网 页 开发 者 理解 最 深入 、 应 用 最 广泛 的 事件 处 
理 模 型 。 

这 个 模型 有 多 种 名 称 。 你 也 许 听 过 它 被 称 为 网 景 事件 模型 ( Netscape Event Model )、 基 本 事 
件 模 型 ( Basic Event Model )， 甚 至 它 被 含糊 地 称 为 浏览 名 事件 模型 ( Browser Event Model )， 但 
是 大 部 分 人 称 其 为 DOM 第 0 级 事件 模型 (DOM Level 0 Event Model )。 








一 一 


注意 00 DOMUDU DOM Leve0UUO0OD w3CDOoMUODOOODOOODOOOOUOODOOOODO 
UUD DoOMU 0UUUDOUOOUDOOOUOODOUOOUO0O0UU DPOMU 10OUDUUOUUUUUUOD 





直到 2000 年 11 月 DOM 第 2 级 被 引入 时 ，W3C 才 真正 为 事件 处 理 建 立 了 标准 模型 。 这 个 模 
型 得 到 了 所 有 标准 兼容 的 现代 浏览 器 的 支持 , 比如 Firefox、Camino( 以 及 其 他 的 Mozilla 浏览 器 )， 
Safari 和 Opera。 正 浏 览 需 则 继续 特 立 独行 , 它 支 持 DOM 第 2 级 事件 模型 的 一 个 功能 子 集 一 一 尽 
管 使 用 的 是 专 有 接口 。 
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在 了 解 jQuery 如 何 化 解 这 个 恼人 的 事实 之 前 ， 先 伦 一 些 时 间 学 习 各 种 事件 模型 是 如 何 运 
作 的。 


4.1.1 DOM 第 0 级 事件 模型 


DOM 第 0 级 事件 模型 是 大 多 数 Web 开发 者 在 他 们 的 页 面 上 采用 的 事件 模型 。 除 了 有 点 依赖 
于 浏览 锅 之 外 ， 它 使 用 起 来 还 是 相当 容易 的 。 

在 这 种 事件 模型 下 ， 事 件 处 理 各 是 通过 将 一 个 函数 实例 的 引用 赋值 给 DOM 元 系 的 属性 来 声 
明 的 。 定义 这 些 属性 来 处 理 特定 的 事件 类 型 例如, 将 也 数 赋值 给 onclick 属性 来 处 理 单 击 事件 ， 
将 函数 赋值 给 onmouseover 属性 来 处 理 mouseover 事件 ， 而 这 些 元 素 需 要 支持 这 些 事件 类 型 。 

浏览 右 允 许 将 事件 处 理 函 数 的 主体 作为 特性 值 角 入 到 DOM 元 系 的 HTML 标记 中 ,这 样 提供 
了 创建 事件 处 理 喜 的 便捷 方式 。 定 义 这 种 处 理 需 的 示例 如 代码 清单 4-1 所 示 。 这 个 页 面 可 以 在 本 
书 的 示例 代码 文件 chapter4/dom.0.events.html 中 找到 。 


代码 清单 4-1 声明 DOM 第 0 级 事件 处 理 器 


<!IDOCTYPE html> 








<html> 
<head> 
<title>DOM Level 0 Events Example</title> 
<link rel="stylesheet" type="text/css" href="../styles/core.css'"/> 
<script type="text/javascript" src="../scripts/jquery-1.4.min.js"></ 
script> 
<script type="text/javascript" src="../scripts/jqia2.support.js"></ 
script> 
eript LyieesTierE /ayaaeribpt' 定义 mouseover 
rineten | 了 处 理 器 
$s('#¥example') [0] .onmouseover = function(event) f{ 
say('Crackle!'); 
ee 6 输出 文本 到 “控制 台 ” 
</script> 
</head> 
<body> 了 设置 <img> 元 素 
<img id="example" src="example.jJpg'" 
onclick="say('BOOM!');" 
alt="o000h! ahhhh!"/> 
</body> 
</html> 





本 例 使 用 了 两 种 方式 来 声明 事件 人 处理 器 : 在 脚本 控制 下 声明 和 在 标记 特性 中 声明 。 

页 面 首先 定义 了 一 个 就 绪 处 理 圳 ， 在 其 中 获取 :ia 为 example 的 图 片 元 素 的 引用 ( 使 用 
jQuery )， 并 设置 它 的 onmouseover 属性 为 内 联 滑 数 @。 当 mouseover 事件 在 元 素 上 触发 时 ， 
这 个 孔 数 就 成 为 了 它 的 事件 处 理 器 。 注 意 ,这 个 也 数 要 求 传 入 一 个 参数 。 我们 将 很 快 学 到 有 关 这 
个 参数 的 更 多 知识 。 
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在 这 个 函数 内 ， 我 们 使 用 了 一 个 小 的 实用 函数 服务 (say () @ )， 用 来 将 文本 信息 输出 到 页 
面 上 一 个 动态 生成 的 <aiv> 元 素 中 ( 称 为 “控制 台 ”)。 这 个 函数 在 导入 的 支持 脚本 文件 
(jqia2.supportjs ) 中 声明 ， 当 页 面 上 有 事件 发 生 时 ， 这 个 函数 可 以 减少 一 些 麻烦 ， 我 们 不 必 使 用 
令 人 讨厌 的 和 具有 破坏 性 的 警告 框 来 指示 有 事件 发 生 。 我 们 将 在 本 书后 面部 分 的 很 多 示例 中 使 用 
这 个 方便 的 函数 。 

在 页 面 的 主体 ( <boay> ) 中 , 我 们 放置 了 一 个 在 其 中 定义 事件 处 理 器 的 <img> 元 素 。 我 们 已 
经 看 到 在 就 绪 处 理 器 中 如 何在 脚本 控制 下 定义 处 理 器 @， 不 过 这 里 使 用 <img> 元 素 的 onclick 
特性 @ 声 明了 一 个 单 击 事件 处 理 器 。 

















注意 0000000000000000 Javascipt000000000000000000 
UDOUDUUDUUUUUUUUUUUUU DoOMUOUUUUD 


在 浏览 硕 中 打开 这 个 页 面 〈 找 到 文件 chapter4/dom.0.events.html )， 在 图 片上 移动 几 次 鼠标 指 
针 ， 然 后 单 击 这 个 图 片 ， 显 示 的 结果 类 似 于 图 4-1 所 示 。 


ANO DOM Level 0 Events Example = 





GG Xx © http://localhost/jqia2/chaprter4 /dom.0.events.html 区 





:48.369 - Crackle! 


5 

5:49.089 - Cracklel! 
5:49.892 - Crackiel 
5:50.620 ~- BOOM! 


/4 





图 4-1 在 图 片上 移动 好 标 并 单 击 图 片 ， 触 发 事件 处 理 带 一 一 输出 消息 到 控制 台 
我 们 在 <img> 元 素 标记 中 使 用 如 下 特性 声明 单 击 事件 处 理 末 : 


onclick="say('BOOM!');" 

这 可 能 让 人 误 以 为 say () 函数 成 为 了 该 元 素 的 单 击 事件 处 理 颖 ， 但 事实 并 非 如 此 。 当 通过 
HTML 标记 特性 声明 处 理 如 时， 会 自动 创建 一 个 将 特性 值 作为 函数 体 的 匿名 函数 。 假 设 
imageElement 是 对 此 图 片 元 素 的 引用 ,下面 的 代码 等 价 于 通过 特性 声明 创建 的 结构 : 

imageElement.onclick = function(event) { 


say('BOOM!').， 
和 全 
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注意 ,特性 值 是 如 何 作 为 生成 的 函数 的 函数 体 的 ,并且 注意 由 于 创建 了 函数 ， 从 而 可 在 其 中 
使 用 event 参数 。 

在 继续 探索 什么 是 event 参数 之 前 , 应 该 注意 到 , 使 用 特性 机 制 来 声明 DOM 第 0 级 事件 处 
理 需 违反 了 第 1 章 中 探讨 的 不 唐 突 的 JavaScript 原则 。 当 在 页 面 中 使 用 jQuery 时 ， 应 该 遵守 不 唐 
突 的 JavaScript 原则 ， 避 人 免 把 显示 标记 与 JavaScript 定义 的 行为 混合 使 用 。 我 们 很 快 就 会 看 到 ， 
jQuery 所 提供 的 声明 事件 处 理 需 的 方式 要 比 这 两 种 方式 更 好 。 

不 过 ， 首 先 探讨 下 什么 是 event 参数 。 

1. Event 实例 

在 大 部 分 浏览 需 中 ， 当 一 个 事件 处 理 需 被 触发 时 ， 名 为 Event 的 类 实例 会 作为 第 一 个 参数 
传人 处 理 带 中 。 而 一 直 占 据 主流 地 位 的 了 正 却 以 目 己 专 有 的 方式 行事 ， 将 Event 实例 保存 到 一 个 
名 为 event 的 全 局 属性 中 ( 也 就 是 windqow 的 一 个 属性 )。 

为 了 处 理 这 种 差异 ,我们 经 常会 在 非 jQuery 的 事件 处 理 器 的 第 一 行 看 到 如 下 代码 : 

if (levent) event = window.event; 

这 个 语句 通过 特征 检测 〈 详 见 第 6 章 ) 来 检查 event 参数 是 否 为 undefined (或 者 null )， 
如 有 果 是 的 话 就 把 window 的 event 属性 赋值 给 它 ， 从 而 消除 了 浏览 如 差异 。 在 这 个 语句 之 后 ,可 
以 在 处 理 需 中 随意 引用 event 参数 ， 无 需 考 虑 它 是 如 何在 处 理 带 中 变 得 可 用 的 。 

Event 实例 属性 提供 了 关于 当前 正在 被 处 理 的 已 触发 事件 的 大 量 信息 。 这 包括 一 些 细节 ， 比 
如 在 哪个 元 素 上 触发 的 事件 、 鼠 标 事 件 的 坐标 以 及 键盘 事件 中 单 击 了 哪个 键 。 

先 别 急 ， 正 浏览 器 不 仅 使 用 专 有 的 方法 来 获取 处 理 喜 使 用 的 Event 实例 ， 而 且 还 使 用 专 有 
的 Event 类 定义 来 取代 W3C 定义 的 标准 一 一 我 们 还 没有 逃 出 对 象 检测 的 丛林 。 

例如 ， 为 了 获取 目标 元 素 ( 正 是 在 该 元 系 上 ， 事件 被 触发 ) 的 引用 ,在 标准 兼容 的 浏览 硕 中 
使 用 target 属性 ， 在 下 中 则 使 用 srcElement 属性 。 通 过 对 象 检测 来 处 理 这 种 不 一 致 性 ， 代 
人 如 下 所 示 : 

var target = (event.target) ? event.target : event.srcElement; 

这 个 二 句 检查 esvent .target 的 定义 是 否 存 在 ,如 采 存 在 ,就 把 它 的 值 赋值 给 局 部 变量 target:; 
否则 , 将 event .srcElement 赋值 给 target。 对 于 其 他 Event 属性 ， 也 需要 采取 类 似 的 步骤 。 

到 目前 为 止 ， 似 乎 事件 处 理 需 只 与 触发 事件 的 元 系 相 关 《〈 例如 代码 清单 4-1 中 的 图 片 元 素 )， 
但 是 事件 会 传播 到 整个 DOM 树 。 下 面 来 探讨 这 个 主题 。 

2. 事件 冒 泡 

当 触 发 了 DOM 树 中 一 个 元 系 上 的 事件 时 ,浏览 硕 的 事件 处 理 机 制 会 检查 这 个 元 素 上 是 否 已 
经 创建 了 特定 的 事件 处 理 右 。 如 采 是 ， 就 会 调用 已 创建 的 事件 处 理 带 。 但 是 事情 还 没有 结束 。 

在 目标 元 素 有 机 会 处 理事 件 后 , 事件 模型 会 检查 目标 元 素 的 父 元 素 , 看 其 是 否 已 经 为 此 事件 
类 型 创建 了 处 理 融 。 如 果 是 ， 就 调用 已 创建 的 处 理 居 ,之 后 检查 它 的 父 元 素 ， 以 及 父 元 素 的 父 元 
素 ， 以 此 类 推 ， 直 到 DOM 树 的 顶部。 因为 事件 处 理 的 器 上 传播 就 像 香 核 酒杯 里 冒 起 的 气泡 一 样 
(假设 DOM 树 的 根 在 项 部 )， 所 以 整个 过 程 被 称 为 事件 冒 泡 。 

下 面 修改 代码 清单 4-1 中 的 示例 ， 以 便 动 态 地 观察 这 个 过 程 的 运行 。 考 虑 代码 清单 4-2。 

























































































图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 





90 第 4 章 事件 处 理 


代码 清单 4-2 事件 从 源 向 上 传播 到 DOM 的 项 部 


<IDOCTYPE html> 
<html id="greatgreatgrandpa"> 


<head> 
<title>DOM Level 0 Bubbling Example</title> 
<link rel="stylesheet" type="text/css" href="../styles/core.css'"/> 
<script type="text/javascript" src="../scripts/jquery-1.4.js"></script> 
<script type="text/javascript" src="../scripts/jqia2.support.js"></ 
script> 
<script type="text/javascript"> 
Ss (function() 1 选择 页 面 上 的 所 有 元 素 
S$S('*').each(function()t 
Var current = this; 
this.onclick = function(event) { 
if (levent) event = window.event,; © 为 选中 的 每 一 个 元 素 应 用 
var target = (event.target) ? onclick 处 理 器 
event.target : event.srcElement, 
say('For ' + Current.tagName + '#'+ current.1id + 
' target is ' + 


target.tagName + '#' + target.id); 


}); 
}); 
</script> 
</head> 


<body id="greatgrandpa"> 
<div id="grandpa"> 
<diyv id="pops"> 
<ijmg id="example" src="example.jpg" alt="ooooh! ahhhh!"/> 
</div> 
</div> 
</body> 
</html> 


本 例 中 ,我们 做 了 很 多 有 趣 的 改动 。 首 先 ， 删 除了 之 前 的 mouseover 事件 处 理 带 ， 以 便 将 
注意 力 集 中 于 单 击 事 件 。 其 次 把 事件 实验 目标 的 图 片 元 素 插 入 到 两 个 般 套 的 <dqiv> 元 素 中 ， 目 的 
是 为 了 将 图 片 元 素 放 在 DOM 层次 结构 中 的 次 处 。 我 们 也 给 页 面 中 几乎 每 个 元 素 赋 了 予 了 一 个 特定 
的 和 唯一 的 id 其 至 包括 <pody> 和 和 <html> 标 签 | 

现在 来 看 看 更 加 有 趣 的 改动 。 

在 页 面 的 就 绪 处 理 需 中 ， 我 们 使 用 jQuery 选择 页 面 上 的 所 有 元 素 ， 并 使 用 each () 方 法 @@ 遍 
历 每 一 个 元 系 。 对 于 每 个 匹配 的 元 素 ， 我 们 将 它 的 实例 保存 在 局 部 变量 current 中 ， 并 创建 了 
onclick 处 理 带 人 @。 这 个 处 理 右 首先 使 用 上 节 讨 论 过 的 依赖 于 浏览 右 的 技巧 ， 找 到 Event 实例 
并 识别 事件 目标 ， 然 后 输出 一 条 控制 台 消 息 。 这 条 消息 是 本 例 中 最 有 趣 的 部 分 。 

本 例 使 用 闭 包 ( 如 果 闭 包 这 一 主题 让 你 感到 很 迷惑 ， 请 阅读 A.2.4 ) 来 显示 当前 元 素 的 标 
签名 称 和 ia， 后 面 紧 跟着 目标 元 素 的 ia。 这 样 做 使 得 输出 到 控制 台 的 每 一 个 消息 都 能 展示 冒 泡 
过 程 中 当前 元 素 的 信息 ， 以 及 引发 整个 过 程 的 目标 元 素 的 信息 。 

加 载 页 面 (文件 chapter4/dom.0.propagation.html ) 并 单 击 图 片 ， 结 果 如 图 4-2 所 示 。 
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Q@NOo0o DOM Level 0 Bubbling Example = 





Ca x © http:/ /localhost/jqia2 /chapter4 /dom.0.propagation.html 





At 15:18:57.722 - For 1IMG#example target is I1MG#example 

15:;18:57.723 - For DIV#pops target is I1MG#example 

5:18:57.724 - For DIV#grandpa target is 1MG#example 

At 15:18:57.726 - For BODY#greatgrandpa target is IMG#example 
18:57.727 ~ For HTML#greatgreatgrandpa target is IMG#example 


到 


图 4-2 ”控制 台 消 息 清 楚 地 展示 了 事件 的 传播 过 程 ， 它 从 目标 元 素 开 始 一 直 冒 泡 到 
DOM 树 的 根 元 素 


这 清楚 地 说 明了 事件 触发 的 时 候 , 事件 首先 传递 到 目标 元 对 上 ,然后 按 顺 序 传递 到 各 祖先 元 
素 上 ， 直 到 根 元 素 <html> 为 止 。 

这 是 一 个 强大 的 功能 ， 因 为 它 允 许 我 们 在 任何 层级 的 元 素 上 创建 处 理 带 ,以 便 处 理发 生 在 后 
代 元 系 上 的 事件 。 比 如 说 有 一 个 定义 在 <form> 元 系 上 的 处 理 磊 ， 它 可 以 用 来 啊 应 在 该 元 系 的 任 
何 后 代 元 素 上 发 生 改变 的 事件 ， 从 而 根据 后 代 元 素 的 新 值 来 动态 地 调整 显示 。 

但 是 如 果 不 想 让 事件 传播 该 怎么 办 ”能 不 能 阻止 事件 传播 ? 

3. 影响 事件 传播 和 语义 动作 

在 有 些 场合 , 我 们 可 能 希望 阻止 事件 继续 向 DOM 树 的 上 层 冒 泡 。 这 可 能 是 因为 我 们 态度 严谨 
并 且 允 着 已 经 完成 了 对 事件 的 必要 处 理 ， 或 者 想 防 止 可 能 在 作用 链 的 高 层 中 发 生 的 不 必要 的 处 理 。 

无 论 何 种 原因 ， 都 可 以 通过 Event 实例 提供 的 机 制 来 阻止 事件 向 更 高 层 传播 。 对 于 标准 兼 
容 的 浏览 各 ,可 以 调用 Event 实例 的 stopPropagation () 方 法 来 阻止 事件 回 更 高 层 的 祖先 元 系 
传播 。 对 于 正 浏 览 锅 ， 可 以 设置 Event 实例 的 属性 cancelBubble 的 值 为 true。 有 趣 的 是 ， 
很 多 现代 标准 兼容 的 浏览 带 也 文 持 cancelBubble 机 制 ， 尽 管 它 不 是 任何 W3C 标准 的 一 部 分 。 

有 些 事件 有 关联 的 黑 认 语义 。 例 如 ， 销 点 元 素 〈<a> ) 上 的 单 击 事件 将 导致 浏览 病 重 定 癌 到 
元 素 的 href 特性 值 ，<form> 元 素 的 提交 事件 将 导致 表单 提交 。 如 末 硕 望 取 消 这 些 域 义 动作 (有 
时 称 为 默认 动作 )， 那 么 可 以 将 事件 处 理 带 的 返回 值 设 为 false。 

这 个 操作 在 表单 验证 领域 很 负 用 。 在 表单 的 提交 事件 处 理 硕 中 ， 可 以 对 表单 控件 进行 验证 ， 
如 果 检 测 到 任何 数据 输入 项 存在 问题 就 返回 false。 

你 可 能 已 经 在 <form> 元 素 上 见 过 如 下 代码 : 


<form name="myForm" onsubmit="return false;" ... 
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在 任何 情 次 下 这 都 可 以 有 效 地 防止 表单 被 提交 ， 除 非 是 在 脚本 控制 下 的 提交 《通过 form. 
submit () 来 提交 不 会 触发 提交 事件 )。 在 许多 使 用 异步 请 求 来 代 符 表单 提交 的 Ajax 应 用 中 ， 这 
是 一 个 第 用 技巧 。 

在 DOM 第 0 级 事件 模型 中 ， 事 件 处 理 融 中 的 几乎 每 个 步 又 都 需要 使 用 浏览 锅 特 定 检测 ， 目 
的 是 为 了 确定 下 一 步 的 动作 。 这 是 多 么 令 人 头疼 的 事 ! 但 是 别 丢 掉 热 情 和 耐心 一 一 在 考 夸 更 加 高 
级 的 事件 模型 时 ， 事 情 不 会 更 催 单 。 


4.1.2 ”DOM 第 2 级 事件 模型 


DOM 第 0 级 事件 模型 有 一 个 产 重 的 缺点 , 因为 存储 在 属性 上 的 函数 引用 充当 了 事件 处 理 厅 ， 
所 以 对 于 任意 指定 的 事件 类 型 ,一 个 元 系 每 次 只 能 注册 一 个 事件 处 理 具 。 如 末 希 望 在 单 击 元 系 时 
执行 两 件 事 情 ， 下 面 的 代码 实现 不 了 这 一 目的 : 


someElement.onclick = doFirstThing; 















































someElement .onclick = doSecondThing; 

因为 第 二 个 赋值 语句 替换 掉 了 前 面 设置 的 onclick 属性 值 ， 所 以 当 触 发 事件 时 只 调用 了 
doSecondThing。o 当然 可 以 使 用 另 一 个 陋 数 来 包装 这 两 个 吨 数 ， 这 样 就 可 以 通过 这 个 陋 数 调用 这 两 
个 吧 数 , 但 是 随 肴 页 面 变 得 更 复杂 , 尤其 在 高 交互 性 的 应 用 中 , 保持 对 此 类 事情 的 跟踪 将 越 来 越 困 难 。 
此 外 ， 如 果 在 页 面 中 使 用 多 个 可 重用 的 组 件 或 库 ， 它 们 可 能 根本 不 知道 其 他 组 件 的 事件 处 理 需求 。 

我 们 可 以 引入 其 他 解决 方案 : 实现 观察 者 模式 ， 为 处 理 需 创建 一 个 发 布 /订阅 方案 ， 或 者 使 
用 闭 包 的 技巧 。 但 是 所 有 的 这 些 都 会 增加 页 面 的 复杂 上 度 ， 而 这 些 页 面 本 来 可 能 就 已 经 很 复杂 了 了。 

除了 建立 标准 的 事件 模型 外 ，DOM 第 2 级 事件 模型 被 设计 来 处 理 这 类 问题 。 下 面 来 看 看 在 
这 个 更 高 级 的 事件 模型 下 如 何 为 DOM 元 素 创 建 事 件 处 理 硕 ， 甚 至 是 多 个 处 理 融 。 

1. 建立 事件 处 理 器 

DOM 第 2 级 事件 处 理 需 (也 称 为 监听 器 ) 是 通过 元 素 方法 创建 的 ， 而 不 是 把 吨 数 引用 赋值 
给 元 素 属 性 。 每 个 元 素 都 定义 有 一 个 名 为 addEventListener () 的 方法 ,用 来 附加 事件 处 理 硕 ( 监 
听 融 ) 到 元 素 上 。 这 个 方法 的 格式 如 下 : 

addEventListener (eventType, listener,useCapture,) 

eventType 参数 是 个 字符 串 , 用 来 获取 需要 处理 的 事件 类 型 。 这 些 字 符 串 值 通 常 和 DOM 第 
0 级 事件 模型 中 不 市 on 前 级 的 事件 名 称 古 一 样 的 。 例 如 ，click、mouseover、keydown 等 。 

listener 参数 是 一 个 也 数 引 用 ( 或 者 内 联 曲 数 ), 用 来 在 元 素 上 创建 指定 事件 类 型 的 处 理 妖 。 
正如 在 基本 事件 模型 里 一 样 ，Event 实例 是 传人 这 个 函数 的 第 一 个 参数 。 

最 后 一 个 参数 usecapture 是 布尔 类 型 , 在 随后 讨论 第 2 级 模型 的 事件 传播 时 会 对 其 进行 探 
讨 。 目 前 将 其 设置 为 false。 

再 次 修改 代码 清单 4-1 中 的 示例 以 便 使 用 更 高 级 的 事件 模型 。 我 们 只 关注 单 击 (click ) 事件 
类 型 ,这 次 为 图 片 元 素 创 建 3 个 单 击 事件 处 理 需 。 新 的 示例 代码 可 以 在 文件 chapter4/dom.2.events. 
html 中 找到 ， 内 容 如 代码 清单 4-3 所 示 。 






























































图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 


4.1 浏览 器 的 事件 模型 93 


代码 清单 4-3 ”使 用 DOM 第 2 级 事件 模型 创建 事件 处 理 器 


<!IDOCTYPE html> 





<html> 
<head> 
<title>DOM Level 2 Events Example</title> 
<link rel="stylesheet" type="text/css" href="../styles/core.css"/> 
<script type="text/javascript" src="../scripts/jquery-1.4.js"></script> 
<script type="text/javascript" src="../scripts/jqia2.support.jJs"> 
</script> 
<script type="text/javascript"> @ 创建 3 个 事件 处 理 器 
$s (function()t 
Var element = $('#example'){[0]; 
element .addEventListener('click',function(event) { 
Say('BOOM oncel!').; 
},false); 
element.addEventListener('click',function(event) { 
say ('BOOM twice!').,; 
},false).; 
element .addEventListener('click',function(event) { 
say ('BOOM three times!'); 
},false); 
Ws 
</script> 
</head> 
<body> 
<img id="example" src="example.jJpg"/> 
</body> 
</html> 











这 段 代 码 非常 简单 , 但 是 它 清楚 地 展示 了 如 何在 同一 个 元 素 上 为 同一 个 事件 类 型 创建 多 个 事 
件 处 理 需 一 一 使 用 基本 事件 模型 是 不 可 能 轻松 做 到 这 一 点 的 。 在 页 面 的 就 绪 处 理 顺 中 @@ 获 取 图 片 
元 素 的 引用 ， 人 然后 为 单 击 事件 创建 3 个 事件 处 理 右 。 

在 标准 兼容 的 训 览 带 〈 非 了 正 浏览 锅 ) 中 加 载 这 个 页 面 ， 然 后 单 击 图 片 ， 结 来 如 图 4-3 所 示 。 


@0oo DOM Level 2 Events Example (一 > 








Reg 其 © http://localhost/jqia2/chaprer4/dom.2.events.html F 





At 15:24:24.348 - BOOM once! 
At 15:24:24.349 - BOOM twicel! 
At 15:24:24.350 - BOOM three times! 





图 4-3 单 击 一 次 图 片 ， 触 发 了 为 单 击 事件 创建 的 3 个 处 理 天 
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注意 ,虽然 这 些 处 理 融 按 照 创 建 的 顺序 触发 ,但 是 标准 并 不 保证 这 种 顺序 ! 代码 的 测试 者 从 
未 观察 到 不 同 于 创建 时 顺序 的 情况 出 现 , 但 是 编写 依赖 于 这 种 顺序 的 代码 是 电 奏 的。 请 时 刻 注意 ， 
在 一 个 元 素 上 创建 的 多 个 处 理 器 可 能 会 以 随机 的 顺序 触发 。 

现在 看 看 useCapture 参数 的 作用 。 

2. 事件 传播 

前 面 我 们 看 到 ， 使 用 基本 事件 模型 ， 一 旦 在 元 素 上 触发 事件 ， 这 个 事件 会 从 目标 元 素 沿 着 
DOM 树 向 上 传播 到 所 有 的 祖先 元 素 。 高 级 的 第 2 级 事件 模型 也 提供 了 这 种 冒 泡 阶段 ， 并 且 还 增 
加 了 额外 的 捕获 阶段 。 

在 DOM 第 2 级 事件 模型 中 ， 当 触发 一 个 事件 时 ， 事件 首先 从 DOM 树 的 根部 向 下 传播 到 目 
标 元 素 , 然后 再 次 从 目标 元 素 向 上 传播 到 DOM 树 根 部 。 前 一 个 阶段 ( 根 到 目标 ) 称 为 捕获 阶段 ， 
后 一 个 阶段 (目标 到 根 ) 称 为 冒 泡 阶段 。 

当 把 函数 创建 为 事件 处 理 融 时 , 可 以 将 其 标记 为 捕获 处 理 怖 ,这 种 情况 下 会 在 捕获 阶段 触发 
事件 ， 也 可 以 将 其 标记 为 在 冒 泡 阶 段 触 发 事件 的 骨 泡 处 理 融 。 此 时 你 可 能 已 经 猜 到 ， 
addEventListener () 的 useCapture 参数 是 用 来 识别 创建 的 是 什么 类 型 的 处 理 需 。 将 此 参数 设 
置 为 false 时 ， 创 建 凡 泡 型 处 理 锅 ， 反 之 参数 为 true 则 建立 捕获 处 理 需 。 

回想 一 下 代码 清单 4-2 中 的 示例 ， 在 那里 我 们 探索 了 基本 事件 模型 下 事件 在 DOM 层次 结构 
中 的 传播 。 在 那个 示例 中 ， 我 们 将 一 个 图 斤 元 素 通 人 到 两 层 <daiv> 元 素 中 。 在 这 种 层次 结构 中 ， 
以 <img> 元 素 为 目标 的 单 击 事件 在 DOM 树 中 的 传播 路 径 如 图 4-4 所 示 。 


















































事件 
- 结束 
<html id=greatgreatgrandpa> a 





» 
估 
» 


















目标 
图 4-4 在 DOM 第 2 级 事件 模型 中 ， 事件 在 DOM 层次 结构 中 有 两 次 传播 过 程 : 一 次 








是 从 顶部 到 目标 的 捕获 阶段 ， 为 一 次 是 从 目标 到 顶部 的 冒 泡 阶段 


现在 就 来 测试 一 下 吧 。 代 码 清 单 4-4 显示 的 页 面 代码 包含 图 4-4 所 示 的 元 素 层 次 结构 
(chapter4/dom.2.propagation.html )。 


代码 清单 4-4 使 用 冒 泡 和 捕获 处 理 带 跟踪 事件 的 传播 
<1DOCTYEPEE html> 
<html] id="greatgreatgrandpa'"> 
<head> 
<title>DOM Level 2 Propagation Example</title> 
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<link rel="stylesheet" type="text/css" href="../styles/core.css"/> 
<script type="text/javascript" src="../scripts/jquery-1.4.jJ]s"></script> 
<script type="text/javascript" src="../scripts/jqia2.support.jJs"> 


</script> 
<script type="text/javascript"> 


Ss (function()t 
站 6 为 所 有 元 素 创建 监听 器 
var current = this; 
this.addEventListener('click',function(event) { 
say('Capture for ' + Current.tagName + '#'+ current.id + 
' target is ' + event.target.id).; 
},true).; 


this.addEventListener('click',function(event) { 


say('Bubble for ' + current.tagName + '#'+ current.id + 
' target is ' + event.target.id); 
},false).; 
J 
my 
</script> 


</head> 


<body id="greatgrandpa'"> 
<div id="grandpa'"> 
<diyv id="pops"> 
<img id="example" src="example.jJpg"/> 
</div> 
</div> 
<div id="console"></div> 
</body> 

</html> 

这 段 代 码 修改 代码 清单 4-2， 使 用 DOM 第 2 级 事件 模型 API 来 创建 事件 处 理 右 。 在 就 绪 处 
理 融 中, 我 们 利用 jQuery 强大 的 能 力 遍 历 DOM 树 中 的 所 有 元 素 。 在 每 个 元 素 上 创建 了 两 个 处 
理 需 : 一 个 捕获 处 理 硕 和 一 个 冒 泡 处 理 器 。 每 个 处 理 需 都 输出 一 条 消息 到 控制 台 , 来 识别 处 理 需 
的 类 型 、 当 前 元 素 以 及 目标 元 素 的 iaq。 

在 标准 兼容 的 浏览 硕 中 加 载 此 页 面 ， 单 击 图 片 的 结果 如 图 4-5 所 示 ， 展 示 了 事件 在 不 同 处 理 
阶段 通过 DOM 树 的 传播 过 程 。 注 意 ， 因 为 我 们 为 目标 元 素 定 义 了 捕获 处 理 硕 和 冒 泡 处 理 釉 ， 所 
以 这 两 种 处 理 硕 会 在 目标 元 素 和 其 所 有 祖 和 爷 方 点 上 执行 。 

既然 我 们 已 经 克服 了 所 有 困难 理解 了 这 两 种 类 型 的 处 理 需 , 就 应 该 知道 捕获 处 理 硕 几乎 不 在 
Web 页 面 中 使 用 。 原 因 很 简单 ， 承 是 正 浏 览 硕 不 文 持 DOM 第 2 级 事件 模型 。 尺 省 下 浏览 各 确 
实 拥 有 一 个 与 第 2 级 标准 的 冒 泡 阶段 相对 应 的 专 有 模型 ， 但 是 它 不 文 持 任何 类 似 的 捕获 阶段 。 

在 看 jQuery 如 何 帮 助 我 们 收拾 这 个 烂摊子 之 前 ， 先 来 简单 看 下 卫 模 型 。 
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OO DOM Level 2 Propagation Example 至 中 
ea 本， © http://localhost/jqia2/chapter4/dom.2.propagation.html 六 





At 15:26:14.292 - Capture for HTML#greatgreatgrandpa target is example 
At 15:26:14.294 - Capture for BODY#greatgrandpa target is example 

At 15:26:14.295 =- Capture for DIV#grandpa target is example 

At 15:26:14.296 - Capture for DIV# pops target is example 

At 15:26:14.297 - Capture for IMG#example target is example 

At 15:26:14.,298 - Bubble for IMG#exarmple target is example 

At 15:26:14.299 - Bubble for DIV#pops target is example 

At 15:26:14.300 - Bubble for DIV#grandpa target is example 

At 15:26:14.301 - Bubble for BODY# greatgrandpa target is example 

At 15:26:14.302 - Bubble for HTML#greatgreatograndpa target is example 


2 





图 4-5 单 击 图 片 ， 使 每 个 处 理 带 都 输出 一 条 控制 台 消 息 ， 用 于 识别 事件 在 捕获 和 冒 
泡 阶段 的 传播 路 径 





4.1.3 IE 事件 模型 


IE 浏览 器 (包括 IE6、IE7 其 至 最 令 人 失望 的 IE8 ) 不 支持 DOM 第 2 级 事件 模型 。 不 过 微软 
浏览 硕 的 这 三 个 版 本 提供 了 专 有 的 接口 来 模拟 标准 模型 的 骨 泡 阶段 。 

IE 模型 为 每 个 DOM 元 素 定 义 了 一 个 名 为 attachEvent () 的 方法 ， 而 不 是 addEvent- 
Listener ()。 类 似 于 标准 模型 ，attachEvent () 方 法 接受 两 个 参数 ， 如 下 所 示 : 

attachEvent (eventName, handler) 

第 一 个 参数 是 字符 串 , 用 来 指定 需要 附加 的 事件 类 型 的 名 称 。 它 不 采用 标准 的 事件 名 称 ， 而 
是 采用 DOM 第 0 级 模型 中 相应 的 元 素 必 性 的 名 称 onclick、 onmouseover.、 onkeydown 等 。 

第 二 个 参数 是 需要 创建 的 处 理 需 果 数 ， 和 在 基本 模型 中 一 样 ，Ewvent 实例 必须 通过 
window.event 属性 来 获取 。 

这 真是 一 团 糟 ! 即便 使 用 相当 独立 于 浏览 器 的 DOM 第 0 级 模型 时 ， 在 事件 处 理 的 各 个 阶段 
仍然 面临 众多 混乱 的 依赖 于 浏览 需 的 选择 。 而 当 使 用 更 强大 的 DOM 第 2 级 模型 或 者 下 模型 时 ， 
我 们 甚至 从 一 开始 创建 处 理 融 时 就 不 得 不 建立 代码 分 文 。 

好 了 ，jQuery 将 尽 其 所 能 地 将 浏览 器 不 一 致 的 地 方 隐藏 起 来 ， 从 而 使 我 们 的 开发 更 加 简单 。 
下 面 来 颇具 jQuery 是 如 何 做 到 的 ! 
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4.2 jQuery 事件 模型 


虽然 创建 高 交互 性 的 应 用 需要 高 度 依赖 于 事件 处 理 , 但 是 大 规模 地 编写 事件 处 理 的 代码 以 兼 
容 不 同 浏览 颖 的 想法 ， 足 以 让 最 无 其 的 页 面 开 发 者 退缩 。 

我 们 可 以 把 不 一 致 性 从 页 面 代 码 中 提取 出 来 ， 将 其 隐藏 在 API 中 ,但 既然 jQuery 已 经 为 我 
们 完成 了 这 一 切 ， 那 为 什么 还 要 大 费 周 折 呢 ? 

jQuery 事件 模型 的 实现 ， 也 被 非 正 式 地 称 为 jQuery 事件 模型 ， 有 如 下 特征 : 

口 为 创建 事件 处 理 融 提供 了 统一 的 方法 ; 

口 允许 为 每 个 元 系 的 每 个 事件 类 型 创建 多 个 处 理 需 ; 

口 使 用 标准 事件 类 型 的 名 称 ， 例 如 click 或 mouseover; 

口 使 得 Event 实例 可 作为 处 理 器 的 参数 ; 

口 规范 化 Event 实例 中 最 稼 用 的 属性 ; 

口 为 取消 事件 和 阻止 默认 行为 提供 统一 的 方法 。 

除了 明显 不 文 持 捕获 阶段 之 外 ，jQuery 事件 模型 的 特征 集 和 DOM 第 2 级 事件 模型 的 特征 集 
非常 相似 ， 都 只 使 用 一 套 API 来 支持 标准 兼容 的 浏览 需 和 正 浏 览 右 。 由 于 捕获 阶段 缺少 正 浏 览 
器 的 支持 ， 因 此 对 于 从 不 使 用 捕获 阶段 (甚至 不 知道 它 的 存在 ) 的 大 部 分 页 面 开 发 者 来 说 ,忽略 
此 阶段 应 该 不 成 问题 。 

真 的 这 么 简单 ? 让 我 们 来 弄 清楚 。 


4.2.1 ”使 用 jQuery 绑 定 事件 处 理 器 


使 用 jQuery 事件 模型 ， 可 以 利用 bina () 方 法 在 DOM 元 素 上 创建 事件 处 理 器 。 考 虑 如 下 简 
单 的 示例 : 



































$S('img') .bind('click',function(event) {alert('Hi there!');}); 
这 个 语句 为 页 面 上 的 每 个 图 片 绑 定 提供 内 联 吨 数 ， 作 为 单 击 事件 处 理 右 。pina() 方 法 的 完 
整 语 法 如 下 所 示 。 


下 面 实 践 一 下 bina() 方 法 。 以 代码 清单 4-3 为 例 ,把 它 从 DOM 第 2 级 事件 模型 转换 为 jQuery 
事件 模型 ， 转 换 后 的 代码 如 代码 清单 4-5 所 示 ， 也 可 以 在 文件 chapter4/jquery.events.html 中 找到 
转换 后 的 代码 。 


代码 清单 4-5 不 使 用 特定 浏 览 融 代码 创建 高 级 事件 处 理 硕 


<!IDOCTYPE html> 


<html> 
<head> 
<title>jQuery Events Example</title> 
<link rel="stylesheet" type="text/css" href="../styles/core.css'"/> 
<script type="text/javascript" src="../scripts/jquery-1.4.js"></script> 
<script type="text/javascript" src="../scripts/jqia2.support.js"></ 


script> 
<script type="text/javascript"> 
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$ (function()t 
$ ('#example') 6 为 图 片 绑 定 3 个 事件 处 理 器 
.bind('click',function(event) { 
Say('BOOM oncel!'),; 
}) 
.bind('click',function(event) { 
say ('BOOM twice!').; 
}) 
.bind('click',function(event) { 
say ('BOOM three times!'); 
1 
I 
</script> 
</head> 


<body> 
<img id="example" src="example.jpg"/> 
</body> 
</htmil> 


这 段 代码 的 修改 只 局 限于 就 绪 处 理 絮 的 函数 体 中 , 虽然 改动 很 小 但 是 意义 重大 @, 我 们 创建 
由 目标 <img> 元 素 组 成 的 包装 集 ， 并 对 其 应 用 3 个 pind() 方 法 ( 记 住 ，jQuery 链 人 允许 在 单个 语 
句 中 应 用 多 个 方法 )， 每 个 方法 都 在 元 素 上 创建 一 个 单 击 (click ) 事件 处 理 融 。 


方法 语法 : bind 





bind(eventType, data, hanlder) 

bind (eventMap) 

创建 一 个 函数 ， 将 其 作为 在 匹配 集中 所 有 元 素 上 指定 的 事件 类 型 的 事件 处 理 器 

参数 

eventType (字符 串 ) 为 将 要 创建 的 处 理 器 指定 事件 类 型 的 名 称 。 可 以 使 用 空格 分 隔 的 列 
表 指 定 多 个 事件 类 型 
通过 在 事件 名 称 的 后 面 添 加 圆 点 字符 分 隔 的 后 级 ， 这 些 事件 类 型 可 以 指定 命 
名 空间 。 本 市 的 剩余 部 分 会 对 其 进行 详细 介绍 


data (对象 ) 调用 者 提供 的 数据 ， 用 来 附加 到 Event 实例 的 data 属性 ,以便 为 处 
理 器 函数 所 使 用 。 如 果 省 略 ， 可 以 指定 第 二 个 参数 为 处 理 器 函数 
handler ( 函数 ) 将 要 创建 为 事件 处 理 器 的 函数 。 当 调用 此 函数 时 ， 会 传 入 Event 实 


例 ， 并 设置 函数 上 下 文 (this ) 为 冒 泡 阶段 的 当前 元 素 
eventMap ( 对象 ) 一 个 JavaScript 对 象 ， 允 许 在 一 次 调用 中 创建 多 个 事件 类 型 的 处 理 


位 


~ 


be) 


: 


属性 的 名 称 指定 事件 类 型 (与 eventType 参数 相同 )， 属 性 的 值 提供 处 理 器 
返回 值 


在 标准 兼容 浏览 可 中 加 载 此 页 面 ， 单 击 图 片 的 结果 如 图 4-6 所 示 ， 这 和 我 们 在 图 4-3 中 看 到 
的 一 模 一 样 ( 除了 URL 和 和 窗口 标题 )， 并 不 令 人 感到 意外 。 
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BODO jQuery Events Example 三 1 
Ke x © nttp://localhost/iqia2 /chapter4 /jquery.events.html ~ 





At 15:29:36.894 - BOOM oncel! 
At 15:29:36.896 - BOOM twice! 
At 15:29:36.897 - BOOM three times! 








图 4-6 jQuery 事件 模型 允许 指定 多 个 事件 处 理 哥 ， 就 像 DOM 第 2 级 事件 模型 那样 


但 或 许 更 重要 的 是 ， 即 便 用 IE 训 览 融 加 载 这 段 代 码 ， 网 页 也 能 正 笛 工 作 ， 如 图 4-7 所 示 。 
如 采 使 用 代码 清单 4-3 中 的 代码 ， 是 做 不 到 这 一 点 的 ， 除 非 回 其 中 添加 浏览 锅 特 定 的 测试 和 分 文 
代码 ， 以 便 为 当前 浏览 带 选 择 正确 的 事件 模型 。 





/ZS jQuery Events Example - Windows Internet Explorer 


Pet 


Cy Ey ” 国 http: /irupert:8080/jqia2/chapter4/jquery.events.htrml .| 《了 | | XX | po 
File Edit View Favorites Tools Help 
Google -| YI IG 5earch ~ 加 甬 轩 13boded 过 Check ”六 Autolink 7» 
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At 21:11:27.,501 - BOOM once! 
At 21:11:27.501 - BOOM twicel 
At 21:11:27.517 - BOOM three times! 
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图 4-7 jQuery 事件 模型 允许 使 用 统一 的 事件 API 来 支持 标准 羔 容 的 浏览 大 和 下 浏览 带 





此 刻 , 那些 曾经 与 页 面 上 堆积 如 山 的 浏览 带 特 定 事件 处 理 代码 做 斗争 的 页 面 开发 者 , 无 疑 会 
欢 唱 “ 快 乐 的 日 子 又 回来 了 ， 并 在 办 公 室 座 椅 上 快乐 地 打转 。 谁 又 能 责怪 他 们 呢 ? 
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jQuery 还 为 事件 处 理 提 供 了 一 个 小 巧 的 额外 功能 , 就 是 通过 指定 命名 空间 来 对 事件 处 理 右 进 
行 分 组 。 和 常规 的 命名 空间 不 同 (通过 前 级 指定 命名 空间 )， 它 通过 为 事件 名 称 添 加 以 圆 点 分 隅 
的 后 组 来 指定 命名 空间 。 事 实 上 ， 如 果 你 愿意 ， 可 以 使 用 多 个 后 组 将 事件 归 人 多 个 命名 空间 。 

通过 这 种 方式 对 事件 绑 定 进行 分 组 ， 随 后 就 可 以 将 它们 看 作 一 个 单元 以 便 对 其 进行 操作 。 

例如 , 一 个 页 面 有 两 种 模式 : 显示 模式 和 编 和 辑 模式 。 在 编辑 模式 下 ,事件 监听 带 放 置 在 页 面 
的 许多 元 系 上 , 但 是 在 显示 模式 下 这 些 监听 带 都 不 适用 了 ,因此 当 页 面 离 开 编辑 模式 时 ， 避 知 要 
删除 这 些 览 昕 各。 我 们 可 以 为 编辑 模式 下 的 事件 指定 命名 空间 ， 代 码 如 下 所 示 : 


Ss('#thingl1') .bind('click.editMode',someListener); 
$s('#thing2') .bind('click.editMode',someOtherListener).， 























EE I 

通过 将 这 些 绑 定 的 事件 分 组 到 editMoge 命名 空间 ， 随 后 可 以 对 它们 进行 整体 操作 。 例 如 ， 
当 页 面 离开 编辑 模式 需要 删除 所 有 的 绑 定 时 ， 可 以 使 用 如 下 代 但 轻松 实现 : 

S('*') .unbind('click.editMode'); 

这 会 为 页 面 上 的 所 有 元 素 删除 位 于 命名 空间 editMode 中 的 所 有 click 绑 定 (下 一 节 会 解 
释 unbind() 方 法 )。 

在 结束 对 bina() 的 学习 之 前 ， 考 虑 男 外 一 个 示例 : 


S$S('.whatever') .bingdl(t 
click: function(event) { /* handle clicks */ }, 





mouseenter: function(event) { /* handle mouseenters */ |}, 
mouseleave: function(event) { /* handle mouseleaves */ } 


}); 

当 需 要 为 一 个 元 素 绑 定 多 个 事件 类 型 的 时 候 ， 在 这 种 情况 下 可 以 通过 调用 单个 bind () 来 实 
现 ， 如 上 所 示 。 

除了 bind () 方 法 ，jQuery 还 为 创建 特定 的 事件 处 理 希 提供 了 一 些 便捷 方法 。 除 了 方法 的 名 
称 不 同 之 外 ,所 有 方法 的 语法 都 是 相同 的 ,为 了 节省 一 些 空间 , 我 们 在 如 下 的 单个 语法 描述 块 中 
呈现 所 有 的 方法 。 

focusin 和 focusout 事件 值得 探讨 。 

不 难 想 象 这 样 的 场景 ,我 们 需要 集中 控制 获取 和 失去 焦点 事件 。 例 如 ,假设 需要 跟踪 表单 里 
已 被 访问 过 的 字段 ,如 果 能 为 表单 创建 单个 处 理 需 而 不 是 为 每 个 元 素 都 创建 一 个 处 理 顺 ,这 就 会 
方便 很 多 。 但 是 我 们 做 不 到 这 一 点 。 

从 本 质 上 来 看 ， 获 取 焦 点 和 失去 焦点 的 事件 是 不 会 沿 大 DOM 树 癌 上 冒 泡 的 。 因 此 ， 建 立 在 
表单 元 素 上 的 获取 焦点 事件 处 理 检 是 不 会 被 调用 的 。 

这 也 是 focusin 和 focusout 之 所 以 出 现 的 原因 。 当 可 聚焦 的 元 系 获 取 或 失去 焦点 时 ,会 
调用 为 元 系 上 的 这 些 事件 创建 的 处 理 咒 ， 同 时 也 会 调用 建立 在 其 祖先 元 素 上 的 任何 此 类 处 理 天 。 

jQuery 还 提供 了 bina () 方 法 的 一 个 专用 版 本 〈 和 名 为 one() )， 用 于 创建 一 次 性 的 事件 处 理 
从。 一 旦 这 个 事件 处 理 融 执行 了 一 次 之 后 ， 就 会 被 目 动 删 除 。 它 的 声 法 类 似 于 bind() 方 法 ， 如 
下 所 示 : 
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方法 语法 : 特定 的 事件 绑 定 


eventTypeName(listener) 


创建 一 个 指定 的 函数 , 将 其 作为 与 方法 名 称 同名 的 事件 类 型 的 事件 处 理 器 。 支持 的 方法 如 下 : 





GLUr focusin mousedown mouseup 

change focusout mouseenter ready 

click keydown mouseleave resize 

dblclick keypress mousemove S&Pro|L] 

error keyup mouseout select 

focus load mouSeover submit 
unload 

注意 ， 当 使 用 这 些 便捷 方法 上 时， 不 能 指定 存储 在 event .data 属性 中 的 data 值 

参数 

listener (函数 ) 创建 将 要 作为 事件 处 理 器 的 函数 

返回 值 

包装 集 


方法 语法 : one 
one (eventType, data, listener) 
创建 一 个 函数 ， 并 将 其 作为 匹配 集中 所 有 元 素 指定 事件 类 型 的 事件 处 理 器 。 这 个 处 理 器 一 旦 
执行 完毕 ， 就 会 被 自动 删除 


参数 

eventType (字符 串 ) 为 将 要 创建 的 处 理 器 指定 事件 类 型 的 名 称 

data (对象 ) 调用 者 提供 的 数据 ， 用 来 附加 到 Event 实例 中 以 便 为 处 理 器 函数 
所 使 用 。 如 果 省 略 ， 则 可 以 指定 第 二 个 参数 为 处 理 器 函数 

listener ( 函数 ) 将 要 被 创建 为 一 次 性 事件 处 理 器 的 函数 

返回 值 

包 汶 集 


这 些 方法 为 我 们 提供 了 将 事件 处 理 带 绑 定 到 所 匹配 元 系 的 多 种 方式 。 而 一 且 绑 定 了 一 个 处 理 
俯 ， 最 终 我 们 可 能 需要 删除 它 。 


4.2.2 ”删除 事件 处 理 器 


一 般 来 说 ， 只 要 创建 了 一 个 事件 处 理 融 , 那么 它 在 页 面 剩 余 的 生命 周期 内 就 是 有 效 的 。 但 是 
些 特别 的 交互 可 能 要 求 根 据 一 定 的 标准 删除 处 理 带 。 考 虑 这 个 例子 , 一 个 用 来 呈现 多 个 步 又 的 
页 面 , 一旦 完成 了 菏 个 步 骤 ， 这 个 步骤 中 的 控件 就 需要 还 原 到 只 读 状 态 。 
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对 于 这 种 情况 ,在 脚本 控制 下 删除 事件 处 理 融 比较 好 。 我 们 已 经 看 到 one ( ) 方 法 在 第 一 次 (也 
是 仪 有 的 一 次 ) 执行 完毕 后 就 会 目 动 删除 处 理 絮 , 但 是 一 般 情 况 下 , 我 们 布 望 由 目 己 控制 删除 事 
件 处 理 硕 ， 为 此 jQuery 提供 了 unbingd() 方 法 。 

unbind() 的 语法 如 下 所 示 。 








方法 语法 : unbind 
unbind(eventType, listener) 
unbind (event ) 
为 包装 集中 的 所 有 元 素 删除 由 可 选 的 传 入 参数 指定 的 事件 处 理 器 。 如 果 没 有 提供 参数 ， 则 会 
从 元 素 上 删除 所 有 的 监听 器 
eventType (字符 串 ) 如 果 提 供 ， 则 只 删除 为 指定 事件 类 型 创建 的 监听 器 
Ds 


1 
呆 吗 


listener (函数 ) 如 果 提 供 ， 则 找 出 将 要 删除 的 指定 监听 器 
Event (事件 ) 删除 触发 Event 实例 描述 的 事件 的 监听 器 
返回 值 
包装 集 


这 个 方法 可 以 用 来 从 各 个 不 同 的 粒度 级 别 删除 匹配 集 元 素 上 的 事件 处 理 带 。 可 以 省 略 所 有 参 
数 来 删除 所 有 的 监听 带 ， 或 者 也 可 以 只 提供 事件 类 型 参数 来 删除 指定 类 型 的 监听 从 。 

可 以 通过 提供 初始 时 被 创建 为 监听 需 的 函数 的 引用 ,来 删除 特定 的 处 理 融 。 为 了 做 到 这 一 点 ， 
当 一 开始 将 函数 绑 定 为 事件 监听 融 时 ， 就 必须 保留 遇 数 的 引用 。 出 于 这 个 原因 , 在 最 初创 建 作为 
监听 融 的 因数 (最 终 将 被 作为 处 理 表 删除 ) 时 ,要么 定义 为 项 级 函数 (以便 通 过 其 项 级 变量 名 来 
引用 )， 要 么 定义 为 通过 其 他 方法 保留 的 对 该 函数 的 引用 。 如 采 提 供 函 数 作为 匿名 的 内 联 引 用 ， 
那么 在 随后 调用 unbina() 时 束 不 可 能 引用 此 函数 。 

在 有 些 情况 下 , 使 用 命名 空间 事件 会 带 来 不 少 方便 , 因为 不 需要 保留 监听 融 的 单个 引用 就 能 
解 绑 定 特定 命名 空间 下 的 所 有 事件 。 例 如 : 

$('*').unbind('.fred'); 

这 个 语句 将 删除 命名 空间 fred 下 的 所 有 事件 监听 器 。 

目前 为 止 ， 我 们 已 经 看 到 ，jQuery 事件 模型 使 得 创建 ( 删除 也 一 样 ) 事件 处 理 带 非 当 简单 ， 
而 无 需 担 心 浏 览 融 差异 ， 但 是 如 何 编写 事件 处 理 融 呢 ? 























4.2.3 Event 实 例 
当 调 用 通过 bing() 方 法 (或 者 任何 相关 的 便捷 方法 ) 创建 的 事件 处 理 希 时 ， 无 论 使 用 的 是 


什么 浏览 絮 ，Event 实例 都 会 作为 第 一 个 参数 传人 图 数 ， 这 样 就 不 用 担心 IE 浏览 左下 的 
window.event 属性 了 。 但 是 要 如 何人 处 理 Event 实例 中 有 差异 的 属性 呢 ? 
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谢 天 谢 地 ， 不 需要 ， 因 为 老实 说 ，jQuery 并 没有 真正 把 Event 实例 传人 处 理 絮 。 

层 ! (针头 在 老 唱 片上 拖 动 的 声 首 。) 

是 的 , 我 们 一 下 对 这 个 小 细 市 闭口 不 谈 ， 因 为 下 到 现在 , 它 并 没有 什么 影响 。 但 是 既然 走 到 
本 这 一 步 ， 我 们 将 要 考察 处 理 右 中 的 这 个 实例 ， 束 必须 了 解 真相 。 

事实 上 , jQuery 定义 了 一 个 传人 处 理 需 的 jQuery .Event 类 型 的 对 象 , 但 是 我 们 的 简化 考虑 
也 是 可 以 原 庆 的 ， 因 为 jQuery 回 这 个 对 象 复制 了 大 部 分 的 原始 Event 属性 。 如 此 一 来 ， 如 采 只 
想 查 找 那 些 出 现在 Event 中 的 属性 ， 那 么 这 个 对 象 和 原始 的 Event 实例 几乎 是 一 样 的 。 

但 是 这 并 非 是 该 对 和 象 的 重要 之 处 一 一 真正 有 价值 的 并 且 也 是 这 个 对 和 象 存 在 的 原因 就 在 于 , 它 
维护 了 一 套 规范 化 的 值 和 方法 ， 因 此 可 以 忽略 Event 实例 的 差异 ， 独 立 于 浏览 各 使 用 它们 。 

















表 4-1 列 出 了 以 平台 无 关 的 方式 可 以 安全 访问 的 jQuery .Event 属性 和 方法 。 





























表 4-1 独立 于 浏览 器 的 jQuery .Event 属 性 
名 称 描述 
属性 
Tt 当 触 发 事件 时 ， 如果 Alt 键 已 被 按 下 ， 则 设置 为 Lrue, 否则 为 false。 
在 大 部 分 的 Mac 键 盘 中 Alt 键 标记 为 Option 
ctrlKey 当 触 发 事件 时 ， 如 果 Ctrl 键 已 被 按 下 ， 则 设置 为 Lrue， 否 则 为 false 
currentTarget® 冒 泡 阶段 的 当前 元 素 , 它 和 事件 处 理 器 中 函数 上 下 文 对 象 是 同一 个 对 象 
date 如 果 有 值 的话 ， 在 创建 处 理 絮 时 ， 将 其 作为 第 二 个 参数 传人 bind () 
页 法 
metaKey 当 触 发 事件 时 , 如 果 Meta 键 已 被 按 下 , 则 设置 为 Lrue, 否则 为 false。 
在 PC 上 Meta 键 是 Ctrl 键 ， 而 在 Mac 上 是 Command 键 
pagex 对 于 鼠标 事件 ， 指 定 触 发 事件 时 光标 相对 于 页 面 原 点 的 水 平 坐标 
pageY 对 于 鼠标 事件 ， 指 定 触发 事件 时 光标 相对 于 页 面 原点 的 垂直 坐标 
relatedTarget 对 于 鼠标 事件 ， 找 出 触发 事件 时 光标 离开 或 者 进入 的 元 素 
screenx 对 于 鼠标 事件 ， 指 定 触发 事件 时 光标 相对 于 屏幕 原点 的 水 平 坐标 
screeny 对 于 鼠标 事件 ， 指 定 触发 事件 时 光标 相对 于 屏幕 原点 的 垂直 坐标 
shiftKey 当 触发 事件 时 ， 如 末 Shift 键 已 被 按 下 ， 则 设置 为 true， 人 和 否则 为 false 
result 从 前 面 的 事件 处 理 器 返回 的 最 近 的 非 undefined 的 值 
target 找 出 触发 事件 的 元 素 
timestamp jouery.Event 实 例 创 建 时 的 时 间 戳 ， 以 毫秒 为 单位 
type 为 所 有 的 事件 指定 触发 的 事件 类 型 ( 例如 click ) 。 如 果 使 用 一 个 事 











件 处 理 带 来 处 理 多 个 事件 ， 那 么 这 会 非常 有 用 


由 注意 currentTarget 和 target 的 区 别 ， 比 如 在 <bodqy> 上 创建 单 击 处 理 需 ， 然 后 单 击 页 面 上 的 一 个 按钮 ， 则 
处 理 器 被 调用 时 ，event .target 是 按钮 元 素 ， 而 sevent .currentTarget 是 <bpody> 元 素 。 


图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 





104 第 4 草 事件 处 理 








( 续 ) 
名 称 描 述 
which 对 于 键盘 事件 ， 指 定 触发 事件 的 按键 的 数字 代码 ; 对 于 鼠标 事件 ， 


指定 按 下 的 是 哪个 按钮 ( 1 为 左 键 、2 为 中 键 、3 为 右键 )。 应 该 使 用 
which 属 性 代替 button 属 性 , 因为 不 能 保证 跨 浏 览 硕 putton 属 性 的 














一 致 性 
方法 
preventDefault() 阻止 任意 默认 的 语义 动作 〈 比 如 表单 提交 、 链 接 重 定 癌 、 复 选 框 状态 
的 改变 等 ) 发 生 
stopPropagation () 停止 事件 沿 厦 DOM 树 向 上 进一步 传播 。 当 前 目标 元 素 上 附加 的 事件 不 
受 影响 。 不 仪 支持 浏览 器 定义 的 事件 ， 而 且 支 持 自 定 义 事件 
stopImmediatePropagation () 停止 所 有 事件 的 进一步 传播 ， 包括 附 加 在 当前 目标 元 素 上 的 事件 
isDefaultPrevented () 如 果 已 经 在 此 实例 上 调用 了 preventDefault () 方 法 , 则 返回 true 
ispropagationstoppedl) 如 果 已 经 在 此 实例 上 调用 stopPropagation() 方 法 , 则 返回 true 
isIimmediatepropagationSstopped!l) 如 果 已 经 在 此 实例 上 调用 stopImmediatePropagation() 方 


法 ， 则 返回 Erue 





使 用 keycoae 属性 在 不 同 浏 览 锅 下 处 理 非 字母 字符 是 不 可 靠 的 ， 认 识 到 这 一 点 很 重要 。 例 
如 , 左 箭 头 键 的 代码 是 37, 这 在 keyup 和 keydown 事件 中 是 可 靠 的 , 但 是 在 keypress 事件 中 ， 
Safari 会 为 这 些 键 返回 非 标准 的 结 

可 以 在 keypress 事件 中 使 用 which 属 性 获得 一 个 可 靠 的 .区 分 大 小 写 的 字符 代码 ,在 keyup 
和 keydown 事件 中 ， 只 能 获得 一 个 不 区 分 大 小 写 的 按键 代码 ( 因此 a 和 A 都 返回 65 ), 但 是 可 
以 通过 检查 shiftrey 属性 来 确定 大 小 写 。 

还 有 ， 如果 想 停 止 事 件 的 传播 ( 而 不 是 立即 传播 " )， 而且 取消 它 的 默认 行为 ,那么 可 以 让 监 
听 妖 了 测 数 返回 false。 

这 一 切 为 DOM 中 现 有 的 所 有 元 素 的 事件 处 理 需 的 创建 和 删除 提供 了 细 粒 度 的 控制 ,但 是 对 
于 那些 还 不 存在 的 元 系 呢 ? 


4.2.4 预先 管理 事件 处 理 器 


使 用 bind() 和 unpbind() 方 法 (以 及 很 多 便捷 方法 )， 可 以 很 容易 地 控制 要 在 DOM 中 的 元 
素 上 创建 哪些 事件 处 理 器 。 就 绪 处 理 融 的 方便 就 在 于 可 以 从 头 开 始 在 DOM 元 素 上 创建 处 理 需 ， 
这 些 DOM 元 素 或 者 是 通过 页 面 上 的 HTML 标记 创建 的 ， 或 者 是 在 就 绪 处 理 器 中 创建 的 。 

使 用 jQuery 最 主要 的 一 个 原因 ( 正如 我 们 在 前 一 章 看 到 的 这 , 它 可 以 轻松 地 动态 操作 DOM。 
当 混 合 使 用 Ajax 时 〈 详 见 第 8 章 )， 很 有 可 能 会 在 页 面 的 生命 周期 内 频繁 引入 DOM 元 素 或 删除 















































中 停止 立即 传播 指 的 是 阻止 任何 附加 到 目标 元 素 上 相同 类 型 事件 的 执行 。 例 如 为 一 个 按钮 建立 两 个 单 击 人 处理 右 ， 如 
采 在 第 一 个 处 理 带 内 调用 event .stopImmediatePropagation()， 则 单 击 此 按钮 时 ， 只 有 第 一 个 处 理 需 执 
行 ， 第 二 个 处 理 融 不 会 执行 。 可 以 对 比 一 下 使 用 event .stopPropagation() 的 情况 。 
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它们 。 在 管理 这 些 动态 元 素 的 事件 处 理 器 时 ， 就 绪 处 理 融 就 起 不 到 多 大 作用 了 , 因为 这 些 动态 元 
系 在 就 绪 处 理 融 执行 时 还 不 存在 。 

当 使 用 jQuery 操作 DOM 时 ， 当 然 可 以 动态 地 管理 这 些 事 件 处 理 需 , 但 是 如 果 能 人 够 将 所 有 事 
件 管理 代 人 码 集中 放 在 一 个 地 方 ， 电 不 是 更 好 ? 

1. 创建 “live” 事 件 处 理 

jQuery 提供 了 我 们 所 期 望 的 1ive () 方 法 ， 该 方法 允许 预先 为 那些 还 不 存在 的 元 素 创 建 事件 
处 理 妖 。 

live() 的 语法 如 下 。 











方法 语法 : live 
live(eventType, data, listener) 
当 指 定 类 型 的 事件 在 元 素 (任何 用 来 创建 包装 集 的 与 选择 器 相 匹 配 的 元 素 ) 上 发 生 时 ,会 将 
传 入 的 监听 器 作为 处 理 器 调用 ， 而 无 论 在 调用 live 方法 时 这 些 元 素 是 否 已 经 存在 
参数 
eventType (字符 串 ) 指定 处 理 器 将 要 调用 的 事件 类 型 的 名 称 。 和 bind() 不 同 ， 不 能 
指定 空格 分 隔 的 事件 类 型 列表 " 


data (对象 ) 调用 者 提供 的 数据 ， 用 来 附加 到 Event 实例 的 data 属性 ， 以 便 为 
处 理 器 函数 所 使 用 。 如 果 省 略 ， 可 以 指定 第 二 个 参数 为 处 理 器 函数 

listener ( 函数 ) 将 要 作为 事件 处 理 器 被 调用 的 函数 。 当 调用 此 函数 时 ， 会 向 此 函数 
传 入 Event 实例 ， 并 设置 目标 元 素 为 函数 上 下 文 (this ) 

返回 值 

包装 集 


如 末 这 个 方法 的 语法 让 你 想起 binqd() 方 法 的 语法 ， 那 就 对 了 。 这 个 方法 的 定义 和 行为 与 
bind() 很 相似 。 不 同 之 处 是 ， 当 相应 的 事件 发 生 时 ， 该 方法 会 为 所 有 匹配 选择 需 的 元 素 触 发 此 
事件 ， 甚 至 包括 那些 在 调用 1ive () 的 时 候 还 不 存在 的 元 素 。 

例如 ， 可 以 这 么 写 : 

$s('div.attendToMe') .livel 

'click', 
function(event){ alert(this); } 

)3 
在 页 面 的 整个 生命 周期 内 , 单 击 任意 拥有 类 attendToMe 的 <aiv> 元 素 都 会 调用 事件 处 理 器 
并 传人 一 个 事件 实例 。 而 且 前 面 的 代码 不 需要 放置 于 承 绪 处 理 带 中 , 因为 “live” 事件 不 关心 DOM 
是 否 已 经 存在 。 














J 这 个 说 法 不 对 ,从 jQuery1.4 开 始 已 经 可 以 为 1ive () 方 法 的 第 一 个 参数 指定 空格 分 隅 的 事件 类 型 列表 或 者 自 定 义 
事件 类 型 了 。 
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利用 live() 方 法 ， 可 以 非常 容易 地 在 页 面 上 的 某 个 地 方 创 建 需要 的 事件 处 理 器 ， 而 无 需 担 
心 元 素 是 否 已 经 存在 ,或 者 什么 时 候 创建 元 素 。 

但 是 使 用 1ive() 时 必须 要 遵守 一 些 注意 事项 ,因为 它 和 pbind() 很 相似 ,你 可 能 会 期 望 “live” 
事件 完全 按照 与 原生 事件 相同 的 方式 工作 , 但 是 它们 是 有 差异 的 , 在 某 些 页 面 中 这 种 差异 可 能 很 
重要 ， 也 可 能 无 关 紧 要 。 

首先 ， 要 意识 到 “live” 事 件 不 是 原生 的 “普通 ”事件 。 当 类 似 于 单 击 的 事件 发 生 时 ， 它 会 
沿 春 DOM 元 系 向 上 传播 ( 如 前 所 述 )， 并 调用 每 一 个 已 经 创建 的 事件 处 理 怖 。 一 旦 事件 到 达 用 
来 创建 包装 集 的 上 下 文 ， 也 就 是 调用 live() 的 地 方 (通常 是 文档 根 节 点 ” )， 上 下 文 会 在 子 节点 
中 检查 匹配 “live” 选 择 器 的 元 素 ?”。“live” 事 件 处 理 器 会 在 每 个 匹配 的 元 素 上 和 触发， 并且 这 个 已 
触发 的 事件 不 能 继续 传播 。 

如 果 页 面 逻辑 依赖 于 传播 和 传播 顺序 ，1ive() 可 能 不 是 最 好 的 选择 一 一 特别 是 将 “live” 事 
件 处 理 融 和 使 用 bina() 创 建 的 原生 事件 处 理 需 混合 使 用 的 时 候 。 

其 次 ，live() 方 法 只 能 应 用 于 选择 器 ， 不 能 应 用 于 衍生 而 来 的 包装 集 。 例 如 ， 下 面 两 个 表 


















































达 式 都 是 合法 的 : 
S('jmg').live( ... ) 
S$S('img', '#someParent') .live( ... ) 


第 一 个 表达 式 会 影响 所 有 的 图 片 ， 第 二 个 表达 式 只 影响 #someParent 创建 的 上 下 文中 的 所 
有 图 片 。 注 意 ， 当 指定 一 个 上 下 文 时 ， 它 必须 在 调用 1ive () 时 已 经 存在 。 
但 下 面 的 表达 式 是 不 合法 的 : 


S$S('img').closest('div').live( ... ) 


为 它 是 在 其 他 的 某 个 对 象 上 调用 live()， 而 不 是 选择 器 。 

虽然 有 这 些 限 制 ， 但 是 在 使 用 动态 元 系 的 任何 页 面 上 使 用 live () 还 是 极其 方便 的 ， 我 们 会 
在 第 8 童 看 到 在 为 页 面 引 入 Ajax 时 它 是 如 何 成 为 关键 的 要 素 的 。 在 本 童 后 面 (4.3 市 )， 我 们 将 
在 一 个 综合 示例 中 广泛 使 用 1ive() ， 这 个 示例 使 用 第 3 章 学 的 便捷 的 DOM 操作 方法 来 创建 动 

2. 删除 “live” 事 件 处 理 

live() 创 建 的 处 理 需 可 以 使 用 gie() 方 法 ( 令 人 讨厌 的 名 字 球 解 绑 定 , 它 的 语法 和 unbind () 
非常 相似 。 

除了 人 允许 以 一 种 独立 于 浏览 病 的 方式 管理 事件 处 理 以 外 , jQuery 还 提供 了 一 套 在 脚本 控制 下 
触发 事件 处 理 需 的 方法 。 下 面 来 看 看 这 些 方法 。 




















中 从 jQuery1.4 开 始 ,“live” 事 件 不 仅 可 以 绑 定 到 文档 根 节 点 ， 也 可 以 绑 定 到 一 个 DOM 元 素 上 下 文 。 
@) 浏 览 jQuery 源 代码 ， 你 会 发 现 这 个 检查 是 通过 $ (event .target) .closest('1ive selector') 来 查找 匹配 
的 元 素 的 。 
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方法 语法 : die 
die(eventType, listener) 
删除 由 live() 创 建 的 “live” 事 件 处 理 器 ， 并 且 阻 止 在 将 来 创建 的 元 素 上 调用 处 理 器 ， 这 些 
元 素 是 与 调用 live() 时 使 用 的 选择 器 相 匹配 的 元 素 


eventType (字符 串 ) 如 果 提供 ， 则 只 删除 为 指定 事件 类 型 创建 的 监听 器 
listener (函数 ) 如 果 提 供 ， 则 找 出 将 要 删除 的 指定 监听 器 

返回 值 

包 浆 集 


4.2.5 触发 事件 处 理 器 


当 浏 览 器 或 者 用 户 活动 触发 了 相关 事件 在 DOM 层次 结构 中 传播 时 ， 事 件 处 理 器 将 被 调用 。 
但 有 时 我 们 想 在 脚本 控制 下 触发 处 理 带 的 执行 。 可 以 将 这 样 的 事件 处 理 表 定义 为 顶级 困 数 ,以便 
通过 名 称 调用 它们 。 但 是 正如 我 们 所 看 到 的 ,将 事件 处 理 融 定义 为 内 联 的 匿名 困 数 更 加 篆 用 , 并 
日 还 非常 方便 。 此 外 ， 将 事件 处 理 带 作为 函数 调用 不 会 触发 语义 动作 ， 也 不 会 叶 致 冒 泡 。 

为 了 满足 这 一 需求 ,jQuery 提供 了 在 脚本 控制 下 目 动 触发 事件 处 理 带 的 方法 。 这 些 方 法 中 最 
利用 的 是 trigger() ， 它 的 语法 如 下 所 示 。 

















方法 语法 : trigger 
trigger (eventType, data,) 
在 所 有 匹配 元 素 上 调用 为 传 入 的 事件 类 型 创建 的 处 理 器 
参数 
eventType (字符 串 ) 指定 将 要 调用 处 理 器 的 事件 类 型 的 名 称 。 这 和 包括 命名 空间 事件 。 
可 以 在 事件 类 型 的 后 面 追 加 感叹 号 (1)， 阻 止 命名 空间 事件 的 触发 


data (任意 ) 将 要 作为 第 二 个 参数 传 入 处 理 器 的 数据 (在 event 实例 之 后 ) 
返回 值 
包装 集 


trigger() 方 法 (以 及 马上 要 介绍 的 其 他 便捷 方法 ) 尽力 模拟 事件 的 触发 过 程 , 包括 在 DOM 
层次 结构 中 传播 以 及 语义 动作 的 执行 。 

每 个 处 理 器 被 调用 时 都 会 传人 一 个 已 填充 的 jQuery .Event 实例 。 因 为 不 存在 真正 的 事件 ， 
此 用 来 报告 事件 相关 值 的 属性 (比如 鼠标 事件 中 光标 的 位 置 和 键盘 事件 中 按 下 的 键 ) 都 是 没有 
值 的 。target 属性 被 设置 为 与 处 理 融 绑 定 的 匹配 集 元 素 的 引用 。 

和 实际 的 事件 一 样 ， 触 发 事件 的 传播 可 以 通过 jQuery .Event 实例 的 stopPropagation () 
方法 ， 或 者 在 任何 调用 的 处 理 带 中 返回 false 来 停止 。 
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注意 DD triggerODOD00000000000000000000000000000 
DU jQuery.Event UUU data UUUUUUUUD trigger DUUUUUUD 
triggerHandler OD DDODUODOUDOUUUUDUUUOUUUUUUUUUUUUUD 
UDODOUODOUUDUUUUUUD 





对 于 只 想 触 发 处 理 硕 ， 而 不 需要 事件 传播 和 语义 动作 执行 的 情 部 ，jQuery 提供 了 trigger- 
Hanler () 方 法 ， EN 本 为 看 起 来 和 trigger () 是 一 样 的 ， 不同 之 处 是 不 会 导致 冒 泡 或 者 执行 语 
义 动作 。 此 外 ， 通 过 1ive 绑 定 的 事件 不 会 被 触发 。 





方法 语法 : triggerHandler 
triggerHandler (eventType, data) 
在 所 有 匹配 元 素 上 调用 为 传 入 的 事件 类 型 创建 的 处 理 器 ， 不 会 冒 泡 、 不 会 执行 语义 动作 ， 也 
不 会 触发 “live” 事 件 


参数 

eventType (字符 囊 ) 指定 将 要 调用 处 理 器 的 事件 类 型 的 名 称 

data (任意 ) 将 要 作为 第 二 个 参数 传 入 处 理 器 的 数据 ( 在 Event 实例 之 后 ) 
返回 值 

包装 集 





水 了 trigger() 和 triggerHanlder() 方 法 ，jQuery 还 提供 了 便捷 方法 来 触发 大 部 分 的 事 
件 类 型 。 除 了 方法 名 称 不 同 之 外 ， 这 些 方法 的 语法 完全 一 样 ， 如 下 所 示 。 





万 法 语 ;大 : eventName 


eventName!() 


在 所 有 匹配 元 素 上 调用 为 命名 事件 类 型 创建 的 处 理 器 。 支 持 的 方法 如 下 所 示 : 


blur focusin mousedown resize 
change focusout mousenter scroll 
lilick keydown mouseleave select 
dblclick keypress mousemove submit 
二 keyup mouseout unload 
focus load mouSeover 

参数 

无 

返回 值 

包装 集 
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除了 绑 定 、 解 绑 定 以 及 触发 事件 处 理 禹 ,jQuery 还 提供 了 一 些 高 级 函数 ， 使 得 页 面 上 的 事件 
处 理 尽 可 能 简单 。 


4.2.6 ”其 他 事件 相关 的 方法 


交互 应 用 页 面 经 常会 使 用 行为 组 合 来 实现 交互 样式 。jQuery 提供 了 一 些 事件 相关 的 便捷 方 
法 ， 使 得 在 页 面 上 使 用 这 些 交 互 行为 更 为 简单 。 下 面 看 看 有 哪些 方法 。 

1. 起 切换 作用 的 监听 器 

第 一 个 方法 就 是 toggle() ， 它 为 单 击 事件 处 理 融 创建 了 一 个 循环 队列 ， 并 应 用 到 每 个 随后 
发 生 的 单 击 事件 中 。 第 一 次 单 击 事 件 时 调用 第 一 个 注册 的 处 理 檀 , 第 二 次 单 击 时 调用 第 二 个 处 理 
催 ， 第 三 次 单 击 时 调用 第 三 个 处 理 带 , 依 此 类 推 。 当 到 达 列 表 中 的 最 后 一 个 处 理 带 时， 第 一 个 处 
理 癌 就 成 为 队列 中 下 次 将 要 调用 的 处 理 带 。toggle() 方 法 的 语法 如 下 所 示 


























a toggle 
toggle(listenerl1, listener2, ...) 
将 传 入 的 函数 创建 为 包装 集中 所 有 元 素 的 单 击 事件 处 理 器 的 循环 列表 。 处 理 器 将 依次 在 随后 
的 单 击 事件 中 被 调用 


参数 
listenerN ( 函数 ) 一 个 或 者 多 个 作为 后 续 单 击 事件 处 理 器 的 函数 
返回 值 
包装 集 





这 个 便捷 方法 的 一 个 第 见 用 途 是 , 根据 元 素 被 单 击 的 次 数 (分 奇数 次 单 击 和 侦 数 次 单 击 ) 切 
换 元 素 的 可 用 状态 。 为 此 ,我 们 需要 提供 两 个 处 理 可 : 一 个 是 奇数 次 单 击 处 理 硕 ， 吃 一 个 是 偶数 
次 单 击 处 理 胡 。 

这 个 方法 也 可 以 使 用 两 个 或 多 个 单 击 处 理 融 来 创建 连续 的 行为 。 考 虑 如 下 示例 。 

假设 有 一 个 站 点 布 望 用 户 可 以 在 3 种 扩 十 下 浏览 图 片 : 小 号 、 中 号 和 大 号 。 这 个 交互 过 程 可 
以 通过 一 系列 的 单 击 事件 来 进行 。 单 击 图 厂 会 载 入 下 一 个 更 大 尺寸 的 图 片 ， 下 到 最 大 尺寸 ,然后 
回 到 最 小 尺寸 。 

在 图 4-8 中 显示 的 是 页 面 随时 间 推 移 的 3 个 状态 。 单 击 一 次 图 斤 时 ， 它 午 会 伸展 到 下 一 个 更 
大 的 大 寸 。 到 达 最 大 故 十 后 ， 如 末 再 次 单 击 图 片 ， 它 就 会 回 到 最 小 尺寸 。 
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oo jQuery .toggle0 Example OO | 
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eto change its size. 
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Click on the a to ry its size. 
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Click on the image to change Its size. 









图 4-8 jQuery 的 toggle() 方 法 允许 我 们 事先 定义 单 击 事件 的 一 系列 连续 行为 
这 个 页 面 的 代码 如 代码 清单 4-6 中 所 示 ， 也 可 以 在 文件 chapter4/toggle.html 中 找到 。 
代码 清单 4-6 ”定义 一 系列 连续 的 事件 处 理 融 


<!IDOCTYPE html> 


<html> 
<head> 
<title>jQuery .toggle() Example</title> 
<link rel="stylesheet" type="text/css" href="../styles/core.css"/> 
<script type="text/javascript" src="../scripts/jquery-1.4.js"></script> 


<script type="text/javascript"> 
Ss (function()t 


Stimylero*=emall]") .toogglet | 创建 一 系列 连续 的 处 理 器 
) 


function() { 

$s(this) .attr('src', 

S(this) .attr('src') .replace(/small/, 'medium' ) ) ，; 
}, 
function() { 

s(this).attr('src', 

S (this) .attr('src') .replace(/medium/,'large')); 


}, 
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function() { 
$ (this) .attr('src', 
$s (this) .attr('src') .replace(/large/, 'small')); 
} 
下 


}); 

</script> 

<style type="text/css"> 
img { 

CUursor: pointer; 

} 

</style> 

</head> 


<body> 


<div>Click on the image to change its size.</div> 
<div> 

<img src="hibiscus.small.jpg" alt="Hibiscus"/> 
</div> 


</body> 
</html> 


注意 D0000000000000000000000000000000000000 
coggle(OUUUDOUOOUOOUOOOOUOUOOOOUODOUOOUO0O0OUUO0O0O0O00D0 JoueryD 
DDDODUOU0OUU0ODODUOODUO0UUU0UUUUUUUUUUUNUUUUD 
UUDOUDUDUOUUUUUUUUUUD 


另 一 个 在 交互 应 用 中 经 浓 遇 到 的 多 事件 场景 涉及 鼠标 进入 和 移出 元 叉 。 

2. 在 元 素 上 悬 停 鼠 标 

通知 我 们 鼠标 光标 在 某 时 进入 某 区 域 或 者 离开 某 区 域 的 事件 , 对 于 在 页 面 上 创建 呈现 给 用 户 
的 很 多 篆 见 用 户 界 面 元 素来 说 ,这 是 必 不 可 少 的 。 在 这 些 元 素 类 型 中 ,作为 导航 系统 的 层 登 沫 单 
是 一 个 常见 示例 。 

mouseover 和 mouseout 事件 类 型 的 一 个 恼人 行为 经 常会 妨碍 我 们 轻松 创建 这 类 元 厅 : 当局 
标 进 入 某 区 域 及 其 子 节 点 时 会 触发 mouseout 事件 。 考 虑 图 4-9 的 显示 (可 从 文件 
chapter4/hover.html 中 获取 )。 

这 个 页 面 显 示 了 两 组 相同 (除了 名 称 以 外 ) 的 区 域 : 每 组 都 包括 一 个 外 部 区 域 和 一 个 内 部 区 
域 。 在 浏览 融 中 加 载 这 个 页 面 并 阅读 本 节 下 面 的 内 容 。 

对 于 页 面 顶 部 的 那 组 矩形 区 域 ， 就 绪 处 理 需 中 创建 mouseover 和 mouseout 事件 处 理 需 的 




















十 

脚本 如 下 : 
$('#outer1l') .bind('mouseover mouseout',report).; 
$('#inner1l') .bind('mouseover mouseout',report); 
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QONOO jQuery .hover0 Example = 





"yy y Ww y [s http:/ /localhost/ijqia2 /chapters4 /hover.html 





mouseover on outer] 
moUuUseout on outer] 
mouseover on inner1l 
MouUseover on inner1l 











图 4-9 这 个 页 面 次 明了 当 鼠 标 光 标 移 和 人 某 区 域 及 其 子 节 点 时 所 触发 的 鼠标 事件 


这 段 代 码 创 建 了 名 为 report 的 函数 作为 mouseover 和 mouseout 的 事件 处 理 需 。 
report () 函数 的 定义 如 下 所 示 : 


function report (event) { 
say (event.type+' on ' + event.target.1d).; 


} 

这 个 监听 器 只 是 把 一 个 包含 触发 事件 名 称 的 <aiv> 元 素 ， 添 加 到 在 页 面 底部 定义 的 名 为 
console 的 <div> 元 系 里 ， 以 便 让 我 们 观察 事件 触发 的 时 间 。 

现在 , 移动 鼠标 光标 进入 标记 为 Outer 1 的 区 域 (小 心 不 要 进入 Inner 1 )。 我 们 将 看 到 ( 观察 
页 面 底 部 的 输出 ) 触发 了 一 个 mouseover 事件 。 将 光标 移出 此 区 域 。 不 出 所 料 ， 触 发 了 一 个 
mouseout 事件 。 

刷新 页 面 以 便 清空 控制 台 重 新 开始 。 

现在 ， 移 动 鼠 标 指针 进入 Outer 1 ( 注意 触发 的 事件 ), 但 是 这 次 继续 癌 内 移动 直到 指针 进入 
Inner 1。 在 鼠标 进入 Inner 1 的 时 候 ，Outer 1 的 mouseout 事件 被 触发 了 。 如 果 在 Outer 1 和 Inner 
] 的 边界 来 回 晃 动 指针 ， 将 会 看 到 一 连 串 的 mouseout 和 mouseover 事件 。 这 就 是 定义 的 行为 ， 
尽管 这 相当 不 直观 。 虽 然 指针 仍然 留 在 Outer 1 的 范围 之 内 ， 但 是 当 指 针 进 入 内 部 的 元 素 时 ， 事 
件 模 型 会 认为 这 个 转变 是 离开 外 部 区 域 。 

不 论 是 否 预料 到 , 我 们 并 不 总 是 需要 那样 的 行为 。 我 们 经 滑 会 而 望 在 指针 离开 外 部 区 域 边界 
时 得 到 提示 ， 而 不 关心 指针 是 否 位 于 内 部 区 域 。 

地 运 的 是 ， 一些 主 要 的 浏览 妖 文 持 一 对 非 标 准 的 鼠标 事件 (mouseenter 和 mouseleave )， 
它们 最 早 由 微软 的 IE 浏览 套 引 入 。 这 对 事件 的 行为 稍微 直观 一 些 ， 当 鼠标 从 一 个 元 系 移 动 到 其 
子孙 元 素 时 不 会 触发 mouseleave 事件 。 对 于 不 文 持 这 些 事件 的 浏览 锅 , jQuery 模拟 它们 的 实现 ， 
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以 便 在 所 有 的 浏览 希 中 它们 的 工作 方式 相同 。 
使 用 jQuery 可 以 用 如 下 代码 为 这 组 事件 创建 处 理 需 : 
S(element) .mouseenter (functioni1) .mouseleave (function2).; 


jQuery 也 提供 了 一 个 更 加 简单 的 单个 方法 : hover ()。 语 法 如 下 所 示 。 





万 志 语法 : hover 
hover (enterHanlder, leaveHandler) 


hover (handler) 
为 匹配 元 素 创 建 mIouseenter 和 mouseleave 事件 处 理 器 。 这 些 处 理 器 只 会 在 鼠标 进入 或 者 
离开 元 素 履 盖 的 区 域 时 被 触发 ， 而 忽略 移动 到 子 元 素 的 转变 


参数 
enterHandler 函数 ) 将 要 成 为 mouseenter 处 理 器 的 函数 


( 
leaveHandler ( 函数 ) 将 要 成 为 mouseleave 处 理 器 的 函数 
handler ( 函数 )mouseenter 和 mouseleave 事件 发 生 时 都 会 调用 的 单个 处 理 器 








在 hoverhtml 示例 页 面 中 , 使 用 如 下 脚本 为 第 二 组 区 域 ( Outer2 及 其 子 元 素 Inner2 ) 创建 鼠 
标 事 件 处 理 需 : 

$('#outer2') .hover (report).; 

和 第 一 组 区 域 一 样 ，report () 图 数 被 创建 为 Outer 2 的 mouseenter 和 mouseleave 事件 处 
理 硕 。 但 是 和 第 一 组 不 同 ， 当 我 们 在 Outer 2 和 Inner 2 的 边界 上 移动 鼠标 指针 时 ， 这 些 处 理 硕 
( Outer2 的 处 理 硕 ) 都 不 会 被 调用 。 对 于 有 些 情 况 ， 当 我 们 不 布 望 父 元 系 处 理 硕 啊 应 鼠标 指针 移 
动 到 子 元 素 的 事件 时 ， 这 会 非常 有 用 。 

下 面 使 用 迄今 为 止 学 到 的 所 有 事件 处 理工 具 来 研究 一 个 示例 页 面 。 这 个 示例 不 仅 使 用 了 这 些 
工具 ， 而 且 也 用 到 了 前 面 几 草 学 到 的 其 他 jQuery 技术 。 


4.3 ”元 分 利用 (更 多 的 ) 事件 


既然 我 们 已 经 探讨 了 jQuery 如 何 清理 跨 浏览 器 不 同事 件 模型 处 理 的 混乱 并 重建 了 秩序 ， 下 
面 就 来 研究 一 个 示例 页 面 , 将 迄今 为 止 学 到 的 知识 都 用 上 。 这 个 示例 不 仅 用 到 了 事件 ， 而 且 也 用 
到 了 前 面 几 章 探讨 的 一 些 jQuery 技术 ， 包 括 一 些 重量 级 的 jQuery 方法 链 。 为 了 更 好 地 理解 这 个 
综合 示例 ， 我 们 假设 目 己 是 视频 发 伐 友 ， 所 收藏 的 成 千 上 万 张 DVD 已 经 成 为 一 个 巨大 的 问题 。 
不 仅 如 何 组 织 这 些 DVD 是 个 问题 ,就 是 迅速 找 出 某 张 DVD 也 变 得 很 困难 ,而 且 所 有 的 这 些 DVD 
都 放 在 盒子 里 ,存储 也 成 了 问题 一 一 它们 占用 了 太 多 空间 ， 如 果 这 个 问题 解决 不 了 的 话 , 我 们 只 
能 将 它们 扔 出 房子 。 
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-个 保存 一 百 张 DVD 的 活页 夹 ， 与 存放 在 盒子 里 的 相当 数量 的 DVD 相 比 ， 占 用 的 空间 更 

少 , 因 此 可 以 通过 购买 DVD 活页 夹 来 解决 存储 问题 .虽然 这 样 可 以 避免 我 们 睡 在 公园 的 长 椅 上 ”， 
但 是 如 何 组 织 DVD 光盘 仍然 是 一 个 问题 。 如 何 找 到 一 张 需要 的 DVD ,而 无 需 手 工 翻 动 每 一 个 活 
页 夹 直 到 找到 需要 的 那 张 呢 ? 

为 了 快速 地 定位 某 张 特定 的 DVD 光一， 我 们 不 能 用 类 似 于 近 宇 母 排序 的 方法 来 组 织 光 一 顺 
序 。 那 样 做 意味 着 每 购买 一 个 新 的 DVD， 就 需要 移动 也 许 儿 十 个 活页 夹 中 的 所 有 光盘 来 保持 已 
收藏 光盘 的 顺序 。 想 象 一 下 在 购买 4bbott and Costello Go to Mars- 之 后 的 工作 量 吧 1 

筠 好 我 们 有 电脑 ， 知 道 如 何 编写 Web 应 用 程序 ， 并 且 还 有 jQuery! 因此 ， 我 们 将 编写 一 个 
DVD 数据 库 程 序 来 帮助 跟踪 所 拥有 的 DVD 以 及 它们 的 存放 位 置 ， 以 解决 这 个 问题 。 

下 面 开 始 工作 吧 ! 


4.3.1 过滤 大 的 数据 集合 


我 们 的 DVD 数据 库 程 序 面临 的 问题 与 很 多 其 他 程序 遇 到 的 一 样 ， 即 究竟 应 该 采用 基于 
Web 的 形式 还 是 其 他 形式 ?如 何 让 用 户 ( 在 这 个 采 例 中 是 我 们 自己 ) 迅速 地 找到 他 们 寻求 的 
信息 ? 

可 以 采用 低 技 术 含 量 的 方式 , 仪 仪 显示 一 个 包含 所 有 标题 的 排序 列表 ,但 如 果 条 目 数 量 很 多 ， 
深 动 列表 仍然 很 痛 闸 。 此 外 ,我 们 想 要 学 习 如 何 正 确 地 实现 这 一 目标 ,以 便 可 以 将 学 到 的 知识 应 
用 到 真正 面 回 客户 的 应 用 程序 中 。 

因此 无 捷径 可 循 ! 

显然 ,设计 整个 应 用 程序 远 远 超出 了 本 章 的 范围 ， 因 此 我 们 将 专注 于 开发 一 个 控制 面板 ， 它 
将 允许 我 们 指定 过 滤器 ， 用 于 调整 数据 库 搜 索 返 回 的 标题 列表 。 

当然 ， 我 们 和 希望 能 够 过 滤 DVD 的 标题 。 但 是 我 们 也 希望 能 够 添加 其 他 的 过 滤 条 件 ， 根 据 电 
影 发 布 的 年 份 、 分 类 、 放 置 光 盘 的 活页 夹 乃 至 是 否 观 看 过 这 部 电影 (这 将 有 助 于 回答 常见 的 问题 ， 
“ 今 晚 我 应 该 看 什么 ? ”) 来 查找 所 需 的 DVD。 

你 最 初 的 反应 可 能 是 想 知 道 这 没什么 大 不 了 的 。 毕 竟 ， 我 们 可 以 放置 多 个 字段 来 完成 检索 ， 
对 吧 ? 

叮 ， 等 一 下 。 类 似 于 标题 的 单个 字段 是 没 问 题 的 ， 例 如 查找 所 有 标题 中 包含 “creature” 的 

影 。 但 是 , 如 果 我 们 想 搜索 “creature” 或 者 “monster”, 该 怎么 办 呢 ? 或 者 只 在 1957 年 或 1972 
年 发 布 的 电影 呢 ? 

为 了 给 指定 过 滤 硕 提供 一 个 健壮 的 接口 ,我 们 需要 人 允许 用 户 指 定 多 个 过 滤 硕 , 用 来 过 小 DVD 
相同 或 不 同 的 属性 ， 而 不 是 试 网 猜测 将 需要 多 少 过 滤 需 。 我 们 对 此 完全 有 把 握 并 可 以 按 需 创建 这 

我 们 将 借用 Apple 用 户 界 面 手册 中 的 一 个 页 面 ,， 并 模仿 很 多 Apple 应 用 程序 中 指定 过 滤 需 的 








































































































中 这 是 夸张 的 说 法 ， 指 DVD 已 经 占据 了 整个 房子 ， 不 得 不 露宿 在 外 面 。 
@) 1953 年 出 品 的 科幻 电影 ， 中 文 译名 为 《两 傻 飞 渡海 神 星 》。 
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方式 来 创建 界面 。( 如 果 你 是 iTunes 用户， 可 以 参考 一 下 Smart Playlists 是 如 何 创 建 的 。) 

每 一 个 过 滤 需 占据 一 行 ， 通 过 下 拉 列 表 (〈 单 选 的 <select> 元 素 ) 来 指定 将 要 过 滤 的 字段 。 
根据 该 字段 的 类 型 ( 字符 串 、 日 期 、 数 字 ， 甚 至 是 布尔 型 ) 在 同一 行 中 显示 合适 的 控件 以 捕捉 过 
滤 需 的 相关 信息 。 

用 户 可 以 依 其 所 好 添加 任意 数量 的 过 滤器 ， 或 者 删除 之 前 指定 的 过 滤 右 。 

一 张 图 片 胜 过 千言 万 语 ， 图 4-10a 到 图 4-10c 显示 了 随时 间 推 进 的 界面 显示 。 这 些 图 片 显 示 
了 我 们 创建 的 过 滤 面 板 : (初始 显示 ，(b) 指 定 一 个 过 滤 需 后 的 显示 以 及 (co) 指 定 很 多 过 滤 需 后 的 
显示 。 





QONO DVD Ambassador — Disc Locator 
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四 口 口 DVD Ambassador 一 Disc Locator 
四 四 [cj [名 | [+| http:/ /localhost/jqia2 /chapter4 /dvds/dvds.html A- 
一 一 二 RE rT 








DVD Ambassador 


Disc Locator 


(x) DVD Tre | contains 0 鸣 | creature 
CO) {ovo Te) [contains BM monster | 用 户 可 以 添加 多 个 


(x ) | Binder 有 3 ‘through'9 | 








(Xx ) | Viewed? | OYes 全 No 





图 4-10c 用户 可 以 添加 多 个 需要 的 过 滤 需 


观察 图 4-10a 到 图 4-10c 的 交互 过 程 ， 就 可 以 发 现 有 很 多 元 素 是 动态 创建 的 。 接 下 来 将 花 一 
些 时 间 来 讨论 如 何 看 手 去 完成 这 个 示例 。 


4.3.2 ”通过 模板 复制 创建 元 素 


很 容易 看 到 , 为 了 实现 这 个 过 滤 控 制 面板 , 将 需要 创建 相当 多 的 元 系 以 啊 应 各 种 事件 。 例 如 ， 
当 用 户 单 击 Add Filter 按钮 时 ， 将 需要 创建 一 个 过 滤 需 条 目 ， 并 且 当 一 个 特定 的 字段 被 选中 时 ， 
将 创建 用 来 限定 过 滤 需 的 新 控件 。 

没 问 题 ! 在 前 一 章 中 , 我 们 已 经 看 到 使 用 jQuery 提供 的 $ () 函数 可 以 很 容易 地 以 动态 的 方式 
创建 元 素 。 虽 然 我 们 会 在 示例 中 使 用 这 种 方法 ， 但 还 将 探索 一 些 更 高 级 的 替代 方法 。 

当 动 态 地 创建 大 量 元 素 时 , 创建 这 些 元 素 的 所 有 代码 可 能 略 显 笨拙 , 保持 它们 之 间 的 关联 可 
能 有 点 难以 维护 ,即便 在 jQuery 的 帮助 下 依然 如 此 。( 没有 jQuery 的 帮助 ,这 将 完全 是 一 个 豆 梦 ! ) 
如 果 能 够 使 用 HTML 为 复杂 的 标记 创建 一 个 “蓝图 ”， 每 当 我 们 需要 这 个 蓝图 的 实例 时 就 可 以 复 
制 出 来 ， 这 个 办 法 很 梭 ， 对 吧 。 

太 棒 了 ! jQuery 的 clone () 方 法 刚好 为 我 们 提供 了 这 种 能 

我 们 将 要 采取 的 做 法 是 ， 创 建 几 组 “模板 ”标记 用 来 呈现 希望 复制 的 HTML 片段 ， 并 在 需 
要 的 时 候 使 用 clone() 方 法 创建 当前 模板 的 实例 。 我 们 不 希望 这 些 模板 对 最 终 用 户 可 见 , 因此 在 
页 面 的 结尾 将 这 些 模板 放置 于 使 用 CSS 隐藏 的 一 个 <div> 元 素 中 。 

作为 示例 ， 请 考虑 下 由 “X” 按 钮 和 下 拉 列 表 组 合 获取 的 可 过 滤 字 段 。 在 每 次 用 户 单 击 Add 
Filter 按 钮 时 ,我 们 都 需要 创建 这 个 组 合 的 一 个 实例 ,利用 jQuery 创建 这 样 的 一 个 按钮 和 <select> 
元 素 及 其 <option> 子 元 素 会 使 代码 过 长 ， 尽 管 编写 和 维护 起 来 可 能 不 会 很 麻烦 。 但 是 可 以 很 容 
匈 联 想到， 如 采 事 情 更 加 复杂 代码 就 会 很 快 变 得 腾 肿 起 来 。 
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使 用 模板 撤 术 ， 将 按钮 和 下 拉 列 表 的 模板 标记 放 在 用 来 隐藏 所 有 模板 的 <aiv> 父 元 素 中 ， 可 
以 创建 如 下 的 标记 : 





<!-—- hidden templates 一 一 > 包含 并 隐藏 所 有 的 
<div id="templates"> 模板 定义 filterChooser 模板 
<div class="template filterChooser"> 


<button type="button" class="filterRemover" title="Remove this 
filter">X</button> 


<select name="filter" class="filterChooser" title="Select a property to 


filter"> 
<option value="" data-filter-type="" selected="selected"> 
-- Choose a filter --</option> 


<option value="title" data-filter-type="stringMatch">DVD Title</option> 
<option value="category" data-filter-type="stringMatch">Category 
</option> 

<option value="binder" data-filter-type="numberRange'">Binder</option> 
<option value="release" data-filter-type="dateRange">Release Date 


</option> 
<option value="viewed" data-filter-type="boolean">Viewed?</option> 
</select> 
</div> 
<!—- more templates go here 一 -> 
</div> 


将 id 值 为 templates 的 外 部 <div> 作 为 所 有 模板 的 容 侣 ， 并 且 设 置 其 CSS 的 display 规 
则 为 none， 以 阻止 它 在 浏览 器 中 显示 出 来 @。 

在 这 个 容器 中 定义 了 男 一 个 <div>, 赋予 它 类 名 template 和 filterChooser@, 通常 使 用 
template 类 来 找 出 模板 ,使 用 filterchooser 类 找 出 这 个 特殊 的 模板 类 型 。 很 快 我 们 将 看 到 
如 何在 代码 中 使 用 这 些 类 一 一 记 住 ， 类 不 仅仅 用 于 CSSI! 

另外 请 注意 ，<select> 中 的 每 个 <option> 都 被 赋予 了 目 定 义 特性 : data-filter-type。 
这 个 值 将 用 于 确定 为 选中 的 过 滤 字 段 应 用 什么 类 型 的 过 滤 控 件 。 

基于 已 确定 的 过 滤 融 类 型 , 我 们 将 选择 适合 这 种 过 滤 硕 类 型 的 限定 控件 来 填充 当前 过 滤 项 所 
在 “ 行 ”的 剩余 控件 。 

例如 ， 如 果 过 泪 融 类 型 为 stringMatch， 需 要 显示 一 个 用 户 可 以 癌 其 中 输入 搜索 词 的 文本 
输入 框 ， 以 及 一 个 下 拉 列 表 , 该 列表 提供 了 多 个 可 选项 供用 户 选 择 如 何 应 用 搜索 词 。 为 这 组 控件 
创建 的 模板 如 下 所 示 : 


<div class="template stringMatch"> 
<select name="stringMatchType"> 
<option value="*">contains</option> 
<option value="^">starts with</option> 
<option value="$">ends with</option> 




















<option value="=">is exactly</option> 
</select> 
<input type="text" name="term"/> 
</div> 





我 们 再 次 使 用 template 类 来 识别 一 个 模板 元 素 ， 并 且 使 用 类 stringMatch 标记 此 元 素 。 
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这 样 做 的 目的 是 使 这 个 类 与 过 滤 融 字段 选择 下 拉 列 表 中 的 gata-filter-type 值 一 致 。 

无 论 何 时 何 地 ， 我 们 硕 望 都 能 使 用 现 有 的 jQuery 知识 来 轻松 复制 这 些 模 板 。 比 方 说 希望 在 某 
个 元 素 的 末尾 谎 加 模板 实例 , 而 这 个 元 素 可 以 通过 变量 名 whatever 来 引用 。 可 以 这 样 编写 代码 : 

$s('div.template.filterChooser') .children() .clone() .appendTo (whatever); 

在 这 个 语句 中 ， 选 择 要 复制 的 模板 容 瘟 (使 用 放置 于 模板 标记 中 的 类 )， 选 择 模 板 容 冀 的 子 
元 素 〈 不 需要 复制 <aiv> ， 只 需要 复制 它 的 内 容 )， 复制 这 些 子 市 点 ， 然 后 将 它们 添加 到 由 
whatever 识别 的 元 素 内 容 的 末尾 。 

现在 明日 为 什么 我 一 直 强 调 jQuery 方法 链 强大 的 原因 了 吧 ? 

查看 filterchooser 下 拉 列 表 的 选项 就 可 以 看 到 已 经 定义 了 很 多 其 他 的 过 滤器 类 型 
numberRange、dateRange 以 及 boolean。 因 此 我 们 也 为 这 些 过 滤 硕 类 型 定义 了 限定 控件 模板 ， 
代码 如 下 所 示 : 


<div class="template numberRange'"> 
<input type="text" name="numberRangel" class="numeric'"/> <span>through 
</span> 
<input type="text" name="numberRange2" class="numeric"/> 
</div> 























<div class="template dateRange"> 
<input type="text" name="dateRangel" class="dateValue'"/> 


<span>through</span> 
<input type="text" name="dateRange2" class="dateValue'"/> 
</div> 


<div class="template boolean"> 
<input type="radio" name="booleanFilter" value="true" checked="checked'"/> 
<span>Yes</span> 
<input type="radio" name="booleanFilter" value="false'"/> <span>No</span> 
</div> 


好 ， 现 在 已 经 确定 了 复制 策略 ， 下 面 就 来 看 下 基础 标记 。 





4.3.3 ”建立 主体 标记 


如 果 回 顾 图 4-10a， 就 会 发 现 DVD 搜索 页 面 的 初始 显示 非常 简单 : 一 些 标题 、 第 一 个 过 滤器 
实例 以 及 两 个 按钮 。 来 看 下 实现 这 个 页 面 的 HTML 标记 : 


<div id="pageContent"> 





<h1i>DVD Ambassador</h1> 
<h2>Disc Locator</h2> 


<form id="filtersForm" action="/fetchrFilteredResults" method="post"> 


<fieldset id="filtersPane'"> 
<legend>Filters</legend> 过 滤器 实例 的 容器 
<div id="filterPane"></div> 
<div class="buttonBar"> 
<button type="button" id="addFilterButton">Add Filter</button> 
<button type="submit" id="applyFilterButton">Apply Filters</button> 
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</div> 
</fieldset> 


去 Z 二 RR 
<div id="resultsPane'"> My 搜索 结果 的 容器 
<span class="none">No results displayed</span> 


</div> 
</form> 

</div> 

这 个 标记 里 没有 太 令 人 奇怪 的 地 方 一 一 有 吗 ? 例 如 , 初始 的 过 滤 融 下 拉 列 表 的 标记 在 哪里 ? 
我 们 已 经 建立 了 一 个 放置 过 滤 融 的 容 右 傣 ， 但 是 它 初 始 时 是 空 的 。 这 是 为 什么 ? 

嗯 ， 我 们 逢 要 能 够 动态 地 填充 新 的 过 滤 可 (很 快 就 会 介绍 到 )， 因 此 为 什么 需要 在 两 个 地 方 
做 这 个 事情 呢 ? 随 后 你 将 看 到 ， 可 以 利用 动态 代码 来 初始 填充 第 一 个 过 滤 癌 ， 因 此 没 有 必要 在 葬 
态 标记 中 显 式 地 创建 它 。 

应 该 指出 的 男 一 件 事 情 是 ， 我 们 预 留 了 用 来 接收 结果 人 @ 的 一 个 容 带 ( 如 何 获 取 结 果 超 出 了 本 
草 的 范围 ), 我 们 把 这 些 结果 放置 在 表单 中 , 因此 结果 本 里 可 以 包含 表单 控件 (为 了 排序 、 分 页 等 )。 

好 的 。 我 们 已 经 有 了 非常 简单 的 主体 HTML 布局 ,而且 还 有 一 些 隐藏 的 模板 ， 可 以 通过 复 
制 它们 来 迅速 地 产生 新 的 元 素 。 最 后 看 下 如 何 编写 代码 来 为 页 面 添加 行为 ! 


























4.3.4 ”添加 新 的 过 滤器 


单 击 Add Filter 按钮 后 ， 就 需要 添加 一 个 新 的 过 滤 絮 到 <div> 元 素 中 ， 这 个 用 来 接收 过 滤 带 
的 <div> 元 孙 是 通过 ia 为 filterPane 来 指定 的 。 

还 记得 吧 ,， 使 用 jQuery 来 创建 事件 处 理 需 简 直 是 小 荣 一 碟 ， 为 Add Filter 按钮 添加 一 个 单 击 
处 理 器 应 该 是 一 件 简 单 的 事情 。 但 是 别 急 ! 我 们 忘 了 考虑 一 些 事情 ! 

我 们 已 经 看 到 当 用 户 添 加 过 滤 需 时 如 何 复 制 表单 控件 , 已 经 有 一 个 很 好 的 策略 用 来 很 容易 地 
创建 这 些 控件 的 多 个 实例 。 但 是 最 终 必 须 将 这 些 值 提交 到 服务 器 ,以 便服 务 需 可 以 在 数据 库 中 查 
找 入 选 的 结果 。 如 果 只 是 一 胃 又 一 思 地 为 控件 复制 相同 的 name 特性 ， 服 务 需 只 会 得 到 一 堆 乱 七 
八 糟 的 东西 ， 而 不 知道 哪个 限定 词 属于 哪个 过 滤 需 ! 

为 了 帮助 编写 服务 需 端 代码 〈 无 论 如 何 这 都 是 一 个 自己 编写 代码 的 好 机 会 )， 我 们 将 为 每 个 
过 滤 项 的 name 特性 追加 一 个 唯一 的 后 组。 我 们 将 保持 简洁 并 使 用 计数 磊 ， 将 在 第 一 组 过 滤 需 控 
件 的 名 称 后 面 追 加 “.1”， 而 第 二 组 追加 的 是 “.2”， 以 此 类 推 。 这 样 ， 当 这 些 过 滤器 控件 作为 请 
求 的 一 部 分 到 达 服 务 絮 时 ， 服 务 右 端 代码 可 以 根据 后 级 对 它们 进行 分 组 。 





























注意 D00000000000%20000000000000000000000000 
DUDOUDO0U0D00D0O0D000000D0U00000000U00UD0UUDUUUUUUD 
DUDUDOUDOOUOOUDOOOUDOOUUOUUDOUUUOIUD nn UUUD 
UUU0000 FOIOUUUDUDU JavaUUUOUUO0O0o0U0000000 bm UUUD 
UUUUU 
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为 了 跟踪 已 经 添加 的 过 涯 融 个 数 〈 这 样 可 以 将 此 计数 作为 随后 的 过 沽 大名 称 的 后 缀 )， 我 们 
将 创建 一 个 初始 化 为 0 的 全 局 变量 ， 如 下 所 示 : 

Var filterCount = 0; 

“全 局 变量 ? 我 认为 它们 是 有 害 的 。 我 听 到 你 这 么 说 。 

如 果 使 用 不 当 ,， 全 局 变量 可 能 会 是 一 个 问题 。 但 在 这 种 情况 下 ,全 局 变量 的 确 代 表 一 个 页 面 
沌 于 内 的 全 局 值 , 并 且 它 绝对 不 会 制造 任何 冲突 ,因为 页 面 的 各 个 地 方 都 将 会 以 一 致 的 方式 访问 
这 个 唯一 值 。 

创建 这 个 变量 之 后 , 将 下 面 代码 诡 加 到 就 绪 处 理 右 中 , 为 Add Filter 按钮 建立 单 击 处 理 融 ( 记 
住 ， 在 知道 DOM 元 又 被 创建 之 后 才能 引用 它们 ): 


$('#addFilterButton') .click(function()t 
var filterIitem = S$S('<div>') 
.addClass ('filterIitem') ©@ 创建 过 滤器 项 目 块 
.appendTo('#filterPane') 
Sata suftftix' ,tt . 4 (filberCountts))s 复制 过 滤器 下 拉 列 表 
Ss('div.template.filterChooser') 模板 
.children() .clone() .appendTo (filterIitem) 
.trigger('adjustName' ); OO 触发 自 定义 事件 











“人 @ 建立 单 击 处 理 器 


上 

虽然 这 个 复合 语句 初 看 起 来 很 复杂 , 但 它 却 使 用 很 少 的 代码 完成 了 大 量 的 功能 。 下 面 来 分 解 
各 个 步骤 。 

这 段 代码 所 做 的 第 一 件 事情 是 使 用 jQuery 的 click (0) 方 法 在 Add Filter 按 钮 上 建立 单 击 处 理 
带 @。 在 单 击 按钮 时 将 调用 传 入 这 个 方法 的 孔 数 ， 此 时 所 有 有 趣 的 事情 就 会 在 函数 内 发 生 了 。 

为 每 次 单 击 Add Filter 按钮 都 会 添加 一 个 新 的 过 滤器 ， 所 以 我 们 为 这 个 过 滤 需 创建 了 一 个 
新 的 容器 @ 来 放置 它 。 为 容器 添加 的 类 filterItem 不 仅 为 了 CSS 样式 ， 也 为 了 在 以 后 的 代码 
中 能 够 找到 这 些 元 素 。 创 建 容 絮 元 素 后 ， 将 其 追加 到 ia 为 filterPane 的 主 过 滤 需 容 锅 中 。 

我 们 也 需要 记录 下 要 添加 到 控件 名 称 的 后 级 , 这 些 控件 将 会 放置 于 filterItem 容 需 中 。 在 
需要 调整 控件 名 称 的 时 候 会 用 到 这 个 后 级 , 这 是 一 个 不 适合 保存 为 全 局 变量 值 的 好 例子 。 每 个 过 
滤 容 器 ( 类 filterItem ) 将 拥有 自己 的 后 级 ， 因 此 用 全 局 变量 记录 这 个 值 将 需要 某 种 复杂 的 数 
组 或 者 表 结 构 ， 以 便 确 保 不 同 的 值 不 会 相互 覆盖 。 

相反 ,使 用 非常 便捷 的 jQuery 的 aata() 方 法 将 后 缀 值 记录 在 元 素 上 可 以 避免 这 种 混乱 。 之 
后 ， 当 需要 知道 为 控件 使 用 什么 后 缀 时 ,我 们 只 需 查 看 控件 容 需 上 的 这 个 数据 值 ， 而 不 用 担心 与 
记录 在 其 他 容 需 上 的 值 相 混 消 。 

代码 片段 : 

.data('suffix','.' + (filterCount++)) 
使 用 filtercount 变量 的 当前 值 格 式 化 后 级 值 , 然 后 将 filtercount 加 1。 使 用 名 称 suffix 
将 这 个 后 缀 值 附加 到 filterItem 容器 上 ， 以 后 每 当 我 们 需要 它 的 时 候 就 可 以 通过 这 个 名 称 来 
获取 。 
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单 击 处 理 器 的 最 后 一 条 语句 全 使 用 我 们 在 前 一 节 讨论 过 的 方法 , 来 复制 已 创建 的 包含 过 滤 下 
拉 列 表 的 模板 。 你 可 能 会 认为 此 时 工作 已 经 完成 了 , 但 是 在 复制 和 追加 之 后 执行 了 如 下 的 代码 
上 请 段 : 

.trigger('adjustName') 

trigger () 方 法 用 来 触发 一 个 名 为 adjustName 的 事件 处 理 需 。 

adjustName? 

如 采 查 阅 规 范 ,你 会 发 现 无 法 找到 这 个 事件 ! 它 是 一 个 只 在 本 页 面 中 定义 的 非 标准 事件 。 这 
段 代码 所 做 的 事情 是 触发 了 一 个 自 定义 事件 。 

目 定 义 事 件 是 一 个 非常 有 用 的 概念 一 一 我 们 可 以 将 代码 作为 目 定 义 事 件 处 理 硕 附加 在 元 际 
上 , 并 通过 触发 事件 来 促使 其 执行 。 与 直接 调用 代码 相 比 ,这 种 方法 的 优点 是 可 以 预先 注册 自 定 
义 处 理 硕 , 并 通过 触发 事件 来 促使 任何 已 经 注册 的 处 理 需 执行 ,而 无 需 知 道 这 些 处 理 器 是 在 哪里 
建立 的 。 




















模式 提醒 

jQuery 中 自 定 义 事 件 能 力 是 观察 者 模式 的 一 个 有 限制 的 示例 ， 有 时 也 被 称 为 发 布 /订阅 模 
式 。 通 过 在 元 素 上 创建 特定 事件 的 处 理 器 来 订阅 元 素 的 该 事件 ， 然 后 当 该 事件 发 布 ( 被 触发 ) 
时 ， 在 事件 层次 结构 中 , 任何 已 订阅 的 元 素 都 会 自动 调用 它们 的 处 理 器 。 这 样 就 可 以 通过 减少 
必要 的 耦合 来 大 大 降低 代码 的 复杂 度 。 

之 所 以 称 其 为 观察 者 模式 的 有 限制 的 示例 ,是 因为 订阅 者 局 限于 发 布 者 祖先 层次 结构 中 的 
元 素 (而 不 是 DOM 中 的 任意 元 素 )。 


因此 上 面 的 代码 将 会 能 发 自 定义 事件 , 然而 我 们 需要 定义 该 事件 的 处 理 器 , 所 以 在 就 绪 处 理 
妖 中 也 创建 了 如 下 代码 来 调整 过 滤 融 的 控件 名 称 : 
$s('.filterIitem [name]').live('adjustName',function()t 
Var suffix = $(this) .closest('.filterIitem') .data('suffix').; 
If (/(\w)+\. (\d)+$/.test($(this) .attr('name'))) return; 
S(this) .attr('name',s$s (this) .attr('name')+suffix); 


上 

这 里 我 们 看 到 ，1live () 方 法 可 以 用 来 预先 建立 事件 处 理 需 。 每 当 添 加 或 者 删除 一 个 过 滤 需 
时 ， 将 会 添加 或 者 删除 拥有 name 特性 的 输入 元 素 ， 因 此 引入 live() 来 在 必要 的 时 候 自 动 建立 
或 者 删除 处 理 咒 。 这 样 一 来 ， 我 们 只 需 设 置 一 次 ，jQuery 就 能 处 理 匹 配 .filterItem [name] 选 
择 需 的 项 被 创建 或 者 销毁 时 的 细节 ， 是 不 是 很 简单 ? 

我 们 指定 自 定义 事件 的 名 称 为 adajustName， 并 且 提 供 了 每 当 自 定义 事件 触发 时 要 执行 的 处 
理 希 。( 因为 adjustName 事件 是 一 个 目 定 义 事 件 ， 所 以 不 可 能 被 用 户 活动 甬 发 ， 也 就 是 说 ， 不 
可 能 以 类 似 单 击 处 理 器 的 方式 工作 。) 

在 处 理 器 中 ， 我 们 获得 了 记录 在 filterItem 容器 上 的 后 级 。 记 住 ， 在 处 理 器 中 ，this 指 
问 触 发 事件 的 元 素 ， 也 就 是 拥有 name 特性 的 元 素 。closest () 方 法 可 以 快速 地 找到 父 容 锅 ， 并 
在 此 元 素 上 找到 后 组 值 。 
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我 们 不 希望 调整 已 经 修改 过 一 次 的 元 紊 名称, 因此 使 用 正则 表达 式 来 测试 名 称 是 否 已 经 有 附 
加 的 后 级 。 如 采 有 ， 束 从 处 理 冀 返回 。 

如 来 尚未 调整 元 素 的 名 称 ， 则 使 用 attr () 方 法 获取 原始 名 称 ， 并 将 调整 后 的 元 素 名 称 返 回 
给 元 素 。 

在 这 一 点 上 值得 深思 的 是 ， 如 何 将 这 段 代 码 作 为 自 定义 事件 实现 ， 以 及 使 用 live() 在 页 面 
代码 中 建立 非常 松散 的 耦合 。 这 使 得 我 们 不 用 担心 要 显 式 地 调用 调整 名 称 的 代码 ,或 者 当 需 要 应 
用 目 定 义 处 理 器 时 要 在 代码 的 各 个 地 方 显 式 地 建立 这 些 处 理 咒 。 这 不 仅 保 持 了 代码 的 简洁 ,而且 
增加 了 代码 的 灵活 性 。 

在 浏览 硕 中 加 载 此 页 面 ， 测 试 Add Filter 按钮 的 行为 。 注 意 ， 每 次 单 击 Add Filter 按钮 时 ， 
新 的 过 滤 需 是 如 何 被 添加 到 页 面 中 的 。 如 果 使 用 JavaScript 调试 需 (Firefox 中 的 Firebug 能 够 胜 
任 这 个 工作 ) 来 检查 DOM , 你 将 会 看 到 每 个 <select> 元 素 的 名 称 都 被 附加 了 过 滤器 特有 的 后 绥 ， 
就 像 预 期 的 那样 。 

但 是 我 们 的 工作 还 没有 结束 , 下 拉 列 表 还 不 能 指定 将 要 过 滤 的 字段 。 当 用 户 选 择 其 中 的 一 项 
时 ， 需 要 使 用 与 该 字段 的 过 滤 类 型 相对 应 的 限定 控件 来 填充 过 滤 容 需 。 
































4.3.5 添加 限定 控件 


每 当选 中 过 滤 硕 下 拉 列 表 中 的 一 项 时 ,就 需要 使 用 适合 该 过 滤 带 的 控件 来 填充 它 。 我 们 已 经 
通过 创建 标记 模板 来 简化 了 操作 ,只 需 在 确定 了 合适 的 模板 之 后 复制 它 就 行 了 , 但 还 需要 在 下 拉 
列表 的 值 改 变 时 完成 一 些 其 他 的 日 第 任务 。 

下 面 看 看 为 下 拉 列 表 建 立 改 变 处 理 带 时 需要 完成 哪些 事情 : 


9 建立 改变 处 理 器 
Ss('select.filterChooser') .11vel('change' function(){ 


Var filterType = S(':selected',this) .attr('data-filter-type'):; 














Var filterIitem = $(this) .closest('.filterIitem'); 
Ss('.qualifier',filterIitem) .remove(); ©O 删除 任何 旧 的 控件 
$s('div.template.'+filterType) 
.Children().clone() .addClass('qualifier') 二 、 
.appendTo (filterIitem) 复制 合适 的 控件 
.trigger ('adjustName'); 9 删除 过 时 的 选项 
$s('option[value=""]',this) .remove(); 


7 
我 们 再 次 利用 jQuery 的 1ive() 方 法 预先 建立 了 处 理 厦 ， 这 个 处 理 屁 会 在 适当 的 时 间 点 自动 
执行 ， 而 无 需 采 取 进 一 步 的 行动 。 这 次 , 我 们 为 任何 将 要 生成 的 过 滤 硕 下 拉 列 表 预 先 建立 了 改变 





提示 0UDU live00000000 jeQvery14000000000000000 


当 触 发 改变 处 理 器 时 ， 首 先 收集 几 条 信息 : 记录 在 自 定 义 aata-filter-type 特性 上 的 过 
滤器 类 型 以 及 父 级 过 滤 容 器 。 
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一 旦 得 到 了 这 些 值 , 我们 就 需要 删除 任何 可 能 已 经 存在 于 容器 中 的 过 滤器 限定 控件 全 。 毕 竞 ， 
用 户 可 以 多 次 改变 选中 的 字段 值 , 我 们 也 不 希望 随 着 程序 的 运行 不 断 地 添加 越 来 越 多 的 控件 ! 当 
所 有 适合 的 元 素 被 创建 时 ， 我们 将 为 它们 添加 qualifier 类 (在 下 一 个 语句 中 )， 以 便 轻 松 地 选 
择 和 删除 它们 。 

一 旦 确信 清除 了 旧 的 元 素 ， 我 们 就 使 用 从 qata-filter- type 特性 获取 的 值 来 复制 模板 以 
创建 正确 的 限定 控件 集合 个。 为 每 一 个 已 创建 的 元 素 添 加 qualifier 类 名 的 目的 是 为 了 便于 选 
择 〈 正 如 在 前 一 个 语句 中 看 到 的 那样 )。 男 外 请 注意 我 们 是 如 何 再 次 触发 adqjustName 目 定 义 事 
件 ， 来 自动 触发 用 来 调整 新 创建 控件 的 name 特性 的 处 理 需 的 。 

最 后 ， 我 们 希望 删除 过 滤器 下 拉 列 表 中 的 “choose a filter”<option> 元 素 人 全 ， 因 为 一 旦 用 户 
选中 了 一 个 特定 的 字段 , 再 次 选择 那个 条 目 就 没有 任何 意义 了 。 我 们 也 可 以 忽略 用 户 选中 该 选项 
时 触发 的 改变 事件 , 但 是 防止 用 户 做 一 些 没 意义 事情 的 最 好 方式 , 是 在 初始 时 不 要 让 他 们 做 这 件 
事情 ! 

再 次 ， 在 浏览 强 中 打开 示例 页 面 。 壬 试 添加 多 个 过 滤 问 ， 并 改变 它们 的 选中 项 。 注 音 限 定 控 
件 是 如 何 总 是 匹配 选中 字段 的 。 如 有 果 可 以 在 调试 希 中 查看 DOM , 观察 name 特性 是 如 何 被 扩 增 的 。 

现在 来 看 下 删除 按钮 。 

4.3.6 ”删除 不 需要 的 过 滤器 和 其 他 任务 

我 们 赋予 了 用 户 改 变 字 段 的 能 力 ,该 字段 将 会 应 用 任意 的 过 滤 带 ,同时 也 提供 了 删除 按钮 ( 标 
记 为 “X”)， 来 完全 删除 过 滤 需 。 

此 时 ,你 应 该 已 经 意识 到 , 使 用 已 掌握 的 工具 来 完成 这 个 任务 儿 乎 是 轻而易举 的 事情 。 当 按 
钮 被 单 击 时 ， 所 需要 做 的 就 是 找 出 最 近 的 父 级 过 滤 容 天 并 删除 它 。 


Ss('button.filterRemover').live('click',function()t 















































S(this) .closest('div.filterItem') .remove():; 


}); 

是 的 ， 就 是 这 么 简单 。 

但 还 有 一 些 其 他 事情 ……: 

你 可 能 会 回想 起 当 页 面 第 一 次 加 载 时 , 显示 了 一 个 初始 的 过 滤器 ,尽管 没有 在 标记 中 包含 它 。 
我 们 可 以 在 页 面 加载 后 ， 模 拟 一 次 Add Filter 按钮 的 单 击 行为 来 实现 这 个 功能 。 

因此 ， 在 就 绪 处 理 器 中 添加 以 下 代码 : 

Ss('#addFilterButton') .click!().; 

这 会 调用 Add Filter 按钮 处 理 厦 ， 就 好 像 用 户 单 击 了 它 一 样 。 

最 后 一 件 事情 。 尽管 处 理 表单 到 服务 占 的 提交 超出 了 本 示例 的 讨论 范围 , 不 过 还 是 给 你 透露 
一 些 在 未 来 几 音 中 将 会 出 现 的 诱 人 的 内 容 。 

下 面 继续 操作 ， 单 击 Apply Filters 按钮 ， 你 可 能 已 经 注意 到 这 是 一 个 表单 的 提交 按钮 。 但 是 
页 面 并 不 像 预 料 的 那样 重新 加 载 ， 而 是 将 结果 显示 在 id 为 resultsPane 的 <dqiv> 元 系 中 。 

这 是 因为 我 们 在 自己 的 处 理 絮 中 取消 了 表单 提交 , 取而代之 的 是 , 使 用 表单 内 容 发 起 了 一 次 
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AJax 请 求 并 将 结果 显示 在 resultsPane 容 大 中 ， 从 而 破坏 了 表单 的 提交 动作 。 我 们 将 在 第 8 章 
看 到 更 多 有 关 jQuery 如 何人 简化 Ajax 操作 的 内 容 , 但 是 你 可 能 会 慰 讶 地 看 到 ( 特别 是 如 末 你 曾经 
做 过 一 些 跨 浏 览 器 的 Ajax 编程 )， 我 们 只 用 一 行 代码 就 能 完成 Ajax 请 求 : 
$('#filtersForm') .submit (function()t 
$('#¥resultsPane').load('applyFilters',s$('#filtersForm') .serializeArray ()); 


return false; 


}); 

如 果 留 意 这 些 显示 结果 , 你 可 能 已 经 注意 到 无 论 指 定 什 么 过 滤器 结果 都 一 样 。 显 然 ， 这 里 没 
有 真正 的 数据 库 支撑 这 个 示例 ， 所 以 它 实际 上 只 是 返回 一 个 硬 编码 的 HTML 页 面 。 但 是 不 难 想 
象 ， 传 递 给 jQuery 的 Ajax 方法 10ad() 的 URL 可 以 指向 能 够 返回 真实 结果 的 资源 ， 比 如 动态 的 
PHP 、Java 小 程序 或 者 Rails 资源 。 

这 样 就 完成 了 这 个 页 面 ， 至 少 完成 了 本 章 所 期 望 达到 的 目标 ， 但 是 我 们 都 知道 ……: 


4.3.7 ”总 是 有 改进 的 余地 


要 使 这 个 过 滤 需 表单 达到 产品 级 的 质量 ， 还 是 有 很 多 改进 余地 的 。 
下 面 列 出 了 一 些 额 外 的 功能 , 它们 或 者 是 表单 被 视 为 完整 之 前 需要 实现 的 ,或 者 只 是 锡 上 添 
花 的 功能 。 你 能 够 使 用 目前 已 获得 的 知识 来 实现 这 些 附 加 功能 吗 ? 
口 表单 缺少 数据 验证 。 例 如 ， 活 页 夹 范 于 的 限定 字段 应 该 是 数字 值 ， 但 是 为 了 防止 用 记得 
入 无 效 值 我 们 什么 也 没 做 。 同 样 的 问题 也 存在 于 日 期 字段 中 。 
我 们 可 以 撤 手 不 管 让 服务 带 问 代码 处 理 它 一 一 毕 范 ,服务 冲 端 无 论 如 何 部 要 进行 数 
据 验 证 。 但 是 这 会 导致 不 愉快 的 用 户 体验 ， 我 提 到 过 ， 处 理 错误 的 最 好 方式 是 在 一 开始 
就 阻止 其 发 生 。 
为 解决 方案 涉及 检查 Event 实例 (目前 还 不 包含 在 本 示例 中 ), 所 以 将 给 出 不 允许 
输入 任何 字符 而 只 能 输入 十 进 制 数字 到 数字 字段 的 代码 。 有 了 在 本 章 中 学 到 的 知识 ， 你 
应 该 很 熟悉 代码 的 操作 ， 如 果 不 是 的 话 ， 现 在 正 是 回去 复习 关键 知识 点 的 好 时 候 。 
$(' Input.numerlc'). 11IVel(' keypress' funct1lon(event) { 


if (event .which < 48 || event.which > 57) return false; 


| 
口 如 前 所 述 ， 没 有 验证 日 期 字段 。 如 何 才能 够 确保 只 输入 有 效 的 日 期 (所 选择 的 任何 格式 ) 
呢 ? 我 们 不 可 能 像 对 竺 数字 字段 那样 逐个 字符 来 判断 。 
在 本 书 的 后 面 ， 我 们 将 看 到 jQuery UI 插件 如 何 巧 妙 地 解决 了 这 个 问题 , 但 是 现在 先 
使 用 已 有 的 事件 处 理 知 识 来 测试 一 下 你 是 否 已 经 掌握 了 它们 。 
口 当 限 定 的 字段 被 添加 到 过 滤 硕 时 ， 用 户 必 须 单 击 其 中 的 一 个 字段 以 便 获 取 焦 点 。 这 不 是 
太 友好 ! 为 示例 请 加 代码 以 便 在 添加 新 控件 时 将 它们 设置 为 焦点 。 
口 使 用 全 局 变量 保存 过 滤器 的 个 数 违背 了 编码 稼 规 , 并 且 还 限制 了 一 个 页 面具 能 有 一 个 “部 
件 ” 实 例 。 通 过 为 合适 的 元 系 应 用 data () 方 法 来 蕉 换 全 局 变量 ,牢记 我 们 可 能 要 在 页 面 
上 多 次 使 用 这 个 变量 。 
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口 表单 允许 用 户 指定 多 个 过 小 带 ， 但 是 没有 定义 如 何 将 这 些 过 渡 带 应 用 到 服务 带 上 。 它 们 
是 应 该 形成 一 个 逻辑 或 (必须 匹配 其 中 的 一 个 过 滤 带 )， 还 是 一 个 逻辑 与 ( 必须 匹配 其 中 
所 有 的 过 滤 作 ) 呢 ? 通 常情 况 下 ， 如 末末 指定 则 假设 为 逻辑 或 。 如 何 改变 表单 以 便 允 许 
用 户 指定 采用 哪个 逻辑 呢 ? 
口 对 于 代码 的 健壮 性 和 界面 的 易 用 性 ， 你 会 做 其 他 哪些 改进 呢 ?”jQuery 如 何 带 忙 呢 ? 
如 条 你 想 出 了 比较 得 意 的 新 点 子 ， 一 定 要 访问 Manning 为 本 书 准备 的 网 站 页 面 http://www. 
manning.com/bibeault2， 其 中 包含 到 论坛 的 链接 。 我 们 或 励 用 户 发 表 目 己 的 解决 方案 ， 这 样 每 个 
人 都 能 看 到 并 参与 讨论 ! 














4.4 ”小 结 





借助 目前 为 止 所 学 的 jQuery 知识 ， 本 间 将 我 们 引入 了 事件 处 理 的 世界 。 

我 们 了 解 到 在 Web 页 面 中 实现 事件 处 理 有 一 些 环 手 的 挑战 ， 但 是 这 样 的 处 理 对 于 创建 交互 
Web 应 用 程序 中 的 页 面 是 必 不 可 少 的 。 这 些 挑战 中 一 个 重要 的 事实 是 , 在 现代 流行 的 浏 览 硕 中 有 
3 个 模型 按照 不 同 的 方式 运行 。 

传统 的 基本 事件 模型 ， 也 被 非 正式 地 称 为 DOM 第 0 级 事件 模型 ， 在 声明 事件 监听 器 时 享有 
某 种 程度 上 独立 于 浏览 各 的 操作 ,但 是 监听 右 函 数 的 实现 需要 依赖 于 浏览 副 的 不 同 代 码 来 处 理 
Event 实例 中 的 差异 。 这 个 事件 模型 可 能 是 页 面 开 发 者 最 熟悉 的 , 它 通 过 将 监听 右 函 数 的 引用 赋 
值 给 元 素 的 属性 (例如 onclick 属性 ) 来 创建 DOM 元 率 的 事件 监听 人 需 。 

这 个 模型 虽然 简单 ， 但 是 却 限制 了 在 特定 的 DOM 元 素 上 的 任何 一 个 事件 类 型 都 只 能 有 一 个 
监听 天 。 

使 用 更 加 先进 和 标准 化 的 DOM 第 2 级 事件 模型 可 以 来 避免 这 方面 的 不 足 ， 在 这 个 模型 中 我 
们 使 用 一 个 API 将 处 理 器 绑 定 到 其 事件 类 型 和 DOM 元 素 上 。 尽 管 这 个 模型 很 通用 , 但 是 它 仅 支 
持 标准 兼容 的 浏览 侣 ， 例 如 Firefox、Safari、Camino 以 及 Opera。 

对 于 下 浏览 器 , 即使 直到 IE8 还 是 使 用 基于 API 的 专 有 事件 模型 , 它 提供 了 DOM 第 2 级 事 
件 模型 的 功能 的 子 集 。 

使 用 一 系列 的 if 语句 编写 所 有 的 事件 处 理 代码 (一 个 子 句 用 于 标准 的 浏览 锅 ， 另 一 个 用 于 
IE 浏览 带 )， 这 会 使 我 们 患 上 早期 痢 末 证 。 泣 运 的 是 ，jQuery 将 我 们 从 这 种 命运 中 拯救 了 出 来 。 

jQuery 提供 了 通用 的 bina() 方 法 用 来 在 元 素 上 建立 任意 类 型 的 事件 监听 器， 以 及 特定 事件 
的 便捷 方法 ,例如 change () 和 click()。 这 些 方法 以 独立 于 浏览 器 的 方式 运行 ， 并 且 使 用 在 事 
件 监 听 需 中 最 向 用 到 的 标准 属性 和 方法 来 标准 化 传人 的 Event 实例 。 

jQuery 也 提供 了 删除 事件 处 理 硕 或 者 在 脚本 控制 下 触发 这 些 处 理 带 的 方法 , 并 且 还 定义 了 一 
些 更 高 级 的 方法 来 尽 可 能 简单 地 实现 普通 的 事件 处 理 任务 。 

这 一 切 似乎 还 不 够 ，jQuery 还 提供 了 1ive() 方 法 ， 为 可 能 还 尚 不 存在 的 元 系 预 完 指定 处 理 
器 ， 而 且 人 允许 我 们 指定 上 自 定 义 方 法 来 轻松 地 注册 将 会 在 自 定 义 事件 发 布 时 调用 的 处 理 需 。 

我 们 探讨 了 在 页 面 上 使 用 事件 的 一 些 示 例 , 还 研究 了 利用 了 很 多 已 学 过 的 概念 创建 的 综合 示 
例 。 在 下 一 章 ， 我 们 将 会 分 析 jQuery 如 何以 这 些 能 力 为 基础 来 引入 动画 和 动画 特效 。 
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本 章 内 容 

口 不 使 用 动画 显示 和 隐藏 元 素 

口 使 用 核心 动画 特效 显示 和 隐藏 元 素 
口 编写 目 定 义 动画 

口 控制 动画 和 函数 队列 








自 LiveScript (LiveScript 随后 被 命名 为 JavaScript ) 出 现 以 来 ,浏览 融 走 过 了 一 段 漫长 的 道 
路 ， 并 于 1995 年 被 引入 Netscape Navigator， 以 便 为 Web 页 面 添加 脚本 控制 。 

在 早期 的 日 子 里 ,页 面 开 发 者 拥有 的 能 力 非 常 有 限 , 不 仅 是 因为 API 很 少 ,而 且 也 是 因为 脚 
本 引擎 低 效 和 系统 的 性 能 不 高 。 使 用 有 限 的 功能 来 实现 动画 和 特效 的 想法 是 可 笑 的 ,多 年 来 唯一 
的 动画 是 由 带动 画 效 有 果 的 GIF 图 片 实现 的 (非常 不 好 用 ， 还 会 降低 页 面 可 用 性 , 令 人 反感 )。 

哦 ， 时 代 已 经 改变 了 。 如 今 的 浏览 右 脚 本 引 苟 快 如 内 电 ,， 运行 在 10 年 前 不 可 想象 的 便 件 上 ， 
为 页 面 开 发 者 提供 了 各 种 丰 宦 的 功能 。 

但 尽管 如 此 ， 由 于 动画 的 实现 依赖 于 低级 别 的 操作 ， 而 JavaScript 没有 易 用 的 动画 引擎 ， 
此 我 们 只 能 依靠 自己 。 别 紧张 ，jQuery 为 我 们 提供 了 相当 简单 的 接口 来 创建 各 种 优雅 的 特效 。 

但 是 在 研究 如 何 为 页 面 添加 很 炫 的 特效 之 前 ,需要 思考 一 个 问题 , 应 该 添加 吗 ? 怠 像 一 部 充 
帮 痢 特效 而 没有 情节 的 好 莱 坞 大 户 一 样 ,一 个 滥用 特效 的 页 面 将 起 到 意 想 不 到 的 负面 作用 。 注 意 ， 
特效 应 该 是 用 来 增强 页 面 的 可 用 性 ， 而 不 是 用 来 炫 次 的 。 

记 住 这 一 点 ， 下 面 来 看 看 jQuery 提供 了 哪些 功能 


5.1 显示 和 隐藏 元 素 


我 们 将 要 对 一 个 或 一 组 元 系 上 应 用 的 最 普通 的 动态 特效 类 型 , 可 能 就 是 显示 或 隐藏 元 系 的 条 
单 操作 。 我 们 随后 将 看 到 更 多 花哨 的 动画 (例如 使 元 素 淡 入 或 淡出 ), 但 是 有 时 我 们 想 尽 量 保持 
简单 ， 也 就 是 让 元 素 立 即 呈 现 或 者 立即 消失 ! 

显示 和 隐藏 元 素 的 方法 和 我 们 所 料 的 一 样 : show() 用 于 显示 包装 集中 的 元 素 , 而 hiae () 用 
于 隐 震 它们 。 我 们 打算 推迟 介绍 这 两 个 方法 的 正式 域 法 ， 稍 后 你 就 会 明日 其 中 的 绿 由 。 现 在 集中 
注意 力 来 看 下 如 何不 市 参数 地 使 用 这 些 方 法 。 
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虽然 这 些 方 法 可 能 看 起 来 简单 ， 但 还 是 应 该 牢记 几 件 事情 。 首 先 ，jQuery 通过 将 元 率 的 
style.display 属性 改 为 none 来 隐藏 元 又。 如 果 包 装 集 中 的 一 个 元 又 已 经 处 于 隐 着 状态 , 它 将 
继续 保持 隐藏 状态 ， 但 仍然 会 被 返回 给 jQuery 链 。 例 如 ， 假设 有 如 下 HTML 片段 : 


<div style="display:none;">This will start hidden</div> 
<div>This will start shown</div> 


如 果 应 用 $s ("div") .hide() .addclass ("fun")， 将 得 到 如 下 结 


<div style="display:none;" class="fun">This will start hidden</div> 
<div style="display:none;" class="fun">This will start shown</div> 


主意 , 虽然 第 一 个 元 素 已 经 隐藏 了 , 但 它 仍然 是 匹配 集 的 一 部 分 , 并 且 参 与 方法 链 的 剩余 操作 。 
ye jQuery 可 以 将 display 属性 从 none 改变 为 plock 或 inline 来 显示 对 象 。 选 择 哪 
个 值 取决 于 之 前 是 否 ? 显 式 地 设置 了 元 系 的 display 属性 值 。 如 果 显 式 地 设置 了 这 个 值 ， 则 它 将 
被 记录 下 来 并 被 恢复 。 否 则 就 取决 于 目标 元 素 类 型 的 display 属性 的 默认 状态 。 例 如 ，<aiv> 
元 对 的 display 属性 的 默认 值 为 block， 而 <span> 元 紊 的 display 属性 的 默认 值 为 inline。 


下 面 看 看 这 些 方法 的 用 法 。 


5.1.1 实现 可 折 色 的 “模块 ” 


蓝 无 疑问 ， 你 很 束 悉 那些 从 其 他 站 点 聚合 数据 的 站 上 点， 这些 站 点 在 某 种 “ 主 面板 ”页 面 将 各 
种 信息 呈现 在 可 配置 的 “模块 ”中 。iGoogle 站 点 就 是 一 个 很 好 的 例子 ， 如 图 5- 
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图 5-1 iGoogle 就 是 这 类 站 点 的 一 个 例子 ， 它 将 聚合 的 信息 在 一 系列 的 主 面板 模块 中 
显示 出 来 
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这 个 站 点 允许 我 们 对 页 面 如 何 呈 现 进 行 很 多 配置 , 包括 来 回 移动 模块 、 将 模块 扩大 到 整个 页 
面 尺寸 、 指 定 配 置信 息 ， 甚至 完全 删除 模块 。 但 是 有 一 件 事情 该 站 点 不 允许 我 们 做 ( 至少 在 编写 
本 书 时 还 不 允许 )， 束 是 “ 卷 起 ”一 个 模块 到 其 标题 祷 ， 这 样 可 以 占用 更 少 的 空间 而 无 需 从 页 面 
上 删除 这 个 模块 。 

下 面 来 定义 日 己 的 主 面板 模块 ， 比 Google 先进 的 是 允许 用 户 卷 起 一 个 模块 到 其 标题 栏 。 

首先 , 来 看 下 我 们 期 望 看 到 的 模块 在 正常 状态 和 卷 起 状态 下 的 样子 , 分 别 如 在 图 5-2a 和 图 5-2b 
所 示 。 














‘Qoo0o Collapsible Module — Take 1 三 | 
Ke 日 http:/1ilocalhostiqiaz/chapter5/collapsible.module,take.1.html 无 


Lorem ipsum dolor sit amet, coNnsectetuer adipiscing 
elt. Aliquam eget enim id neque aliquet porttitor. 
Suspendisse nisl enNnim, nonummy ac, nonumrmy ut, 


dignissim ac, justo. Aenean imperdiet semper nibh. 
Vivamus ligula, In in ipsum sed neque vehicula 
rhoncus, Nam faucibus pharetra nisi. Integer at 
metus. Suspendisse potenti. Vestibulum ante ipsum 
primis in faucibus orci Iluctus et wltrices posuere cubilia 
Curae; Proin Quis eros at metus pretium elementum. 





图 5-2a 创建 自己 的 主 面板 模块 ， 它 包含 两 部 分 ， 一 个 包含 标题 和 卷 起 按钮 的 工具 栏 
以 及 一 个 可 以 展示 数据 的 主体 





BOO Collapsible Module — Take 1 二 让 


GG xX © nttp://localhost/jqia2/chapterS/collapsible.module.take.1.html KE 





图 5-2b ” 当 单 击 卷 起 按钮 时 ， 模 块 的 主体 消失 了 ， 就 好 像 被 卷 人 了 标题 栏 一 样 


在 图 5-2a 中 ， 我 们 创建 的 模块 包括 两 个 主要 部 分 : 标题 栏 和 主体 。 主 体 包 含 了 模块 的 数 
据 一 一 在 这 种 情况 下 ， 是 随机 的 “Lorem ipsum” 文 本 。 标 题 栏 更 加 有 趣 ， 它 包含 了 模块 的 标题 
和 一 个 小 按钮 ， 单 击 这 个 小 按钮 就 会 调用 卷 起 ( 展开 ) 功能 。 一旦 单 击 了 这 个 按钮 ， 模块 的 主体 
将 会 消失 ， 就 好 像 被 卷 人 标题 栏 一 样 。 随 后 的 单 击 会 展开 主体 ， 恢 复 其 初始 外 观 。 








J 这 个 说 法 是 不 准确 的 ， 折 县 一 个 模块 的 功能 就 隐藏 在 标题 栏 向 下 箭头 按钮 的 下 拉 荣 单 中 。 
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用 于 创建 模块 结构 的 HTML 标记 是 非常 简单 的 。 我 们 为 元 素 应 用 了 大 量 的 类 名 用 来 标识 元 
素 以 及 调整 CSS 样式 。 
<div class="module"> 
<div class="caption"> 
<span>Module Caption</span> 
<img src="rollup.gif" alt="rollup" title="rolls up this module"/> 
</div> 
<div class="body"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aliquam eget enim id neque aliquet porttitor. Suspendisse 
nisl enim, nonummy ac, nonummy ut, dignissim ac, justo. 
Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum 
sed neque vehicula rhoncus. Nam faucibus pharetra nisi. 
Integer at metus. Suspendisse potenti. Vestibulum ante 
ipsum primis in faucibus orci luctus et ultrices posuere 
cubilia Curae; Proin gquis eros at metus pretium elementum. 
</div> 
</div> 


整个 结构 包含 在 一 个 类 名 为 module 的 <div> 元 素 中 ， 而 标题 和 主体 结构 分 别 由 类 名 为 
caption 和 body 的 <Qiv> 子 和 点 来 呈现 。 

为 了 给 这 个 模块 添加 卷 起 行为 ， 我 们 给 标题 栏 中 的 图 片 配 备 一 个 负责 所 有 特效 的 点 击 处 理 
器 .有 了 hide() 和 show() 方 法 在 手 ,为 模块 添加 卷 起 行为 比 从 耳 人 条 后 面 拿 出 25 美 分 还 要 简单 。 

下 面 就 是 在 就 绪 处 理 需 中 实现 眷 起 行为 的 代码 : 








上 (QT caption ne .click(lfunctiont(t)t @O 为 按钮 添加 行为 
Var bodys = $(this) .closest('div.module') .find('div.body'); 
if (bodys.is(':hidden')) { 4 
bodys .show(); @ 显示 主体 找 出 相关 的 主体 
} 
else { 
bodys .hide(); 人 @ 隐藏 主体 


} 
人 


可 以 想象 ， 这 段 代码 首先 为 标题 栏 上 的 图 片 创建 单 击 处 理 需 @@。 

在 单 击 处理 圳 中 , 首先 找到 模块 相关 的 主体 。 我 们 需要 找到 特定 的 模块 主体 ， 因 为 在 主 面板 
页 面 可 能 有 很 多 模块 ， 所 以 不 能 选择 类 名 为 pody 的 所 有 元 素 。 通 过 查找 最 近 的 module 容器 可 
以 快速 地 找 出 正确 的 主体 元 素 ， 然 后 把 它 作 为 jQuery 上 下 文 ， 使 用 下 面 的 jQuery 表达 式 来 查找 
内 部 的 body 元 素 @. 

S (this) .closest('div.module') .find('div.body') 

如 果 你 对 这 个 表达 式 如 何 查 找 正 确 的 元 双 不 是 很 清楚 的 话 , 现在 正 是 时 候 来 复习 第 2 草 中 有 
关 查 找 和 选择 元 系 的 内 容 。 

一 旦 找到 了 主体 ， 决 定 主 体 是 应 该 隐藏 还 是 显示 就 非常 简单 了 (jQuery 的 is () 方 法 在 这 里 
显得 非常 方便 )， 视 情况 使 用 show () 方 法 登 来 显示 元 素 或 使 用 hige () 人 @@ 方 法 来 隐藏 元 素 。 


























Q 这 是 一 个 常见 的 哄 小 孩儿 玩 的 魔术 ， 参 考 http://www.wikihow.com/Pull-a-Coin-Out-Of-an-Ear。 
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注意 D00000000000000000000000000000000000000 
D00000000000s$s0000000s$000000000$00000U0U0U0 
UU0000 一 -UUUUOU0sSU0 0UO0O0000000 boqysUUOUDO UDO 
UU DO0OU0U00U0000000000000000000000000000 
DDDOUODOUDUDUDUUUUUUUUUD 


这 个 页 面 的 完整 代码 可 以 在 文件 chapter5/collapsible.module.take.1.html 中 找到 ， 如 代码 清单 
5-1 所 示 。( 如 果 认 为 文件 名 中 的 “take 1” 意 味 着 我 们 会 再 次 使 用 这 个 示例 ， 那 你 是 对 的 ! ) 
代码 清单 5-1 可 折合 模块 的 站 次 实现 


<!IDOCTYPE html> 


<html> 
<head> 
<title>Collapsible Module &mdash; Take 1</title> 
<link rel="stylesheet" type="text/css" href="../styles/core.css" /> 
<link rel="stylesheet" type="text/css" href="module.css" /> 
<script type="text/javascript" src="../scripts/jquery-1.4.js"></script> 
<script type="text/javascript"> 
Ss(function() { 
Ss('div.caption img') .click (function()t 
Var bodys = $(this) .closest('div.module') .find('div.body'); 
if (body$s.is(':hidden')) { 
bodys .show(); 
} 
else { 
bodys .hide(); 
} 
大 
os 
</script> 
</head> 


<body class="plain"> 


<div class="module"> 

<div class="caption"> 
<span>Module Caption</span> 
<img src="rollup.gif" alt="rollup" title="rolls up this module"/> 

</div> 

<div class="body"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aliquam eget enim id neque aliquet porttitor. Suspendisse 
nisl enim, nonummy ac, nonummy ut, dignissim ac, justo. 
Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum 
sed neque vehicula rhoncus. Nam faucibus pharetra nisi. 
Integer at metus. Suspendisse potenti. Vestibulum ante 
ipsum primis in faucibus orci luctus et ultrices posuere 
cubilia Curae; Proin gdquis eros at metus pretium elementunm. 
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</div> 
</div> 
</body> 


</html> 


这 一 点 也 不 难 ， 不 是 吗 ? 但 事实 证 明 ， 它 还 可 以 更 加 简单 ! 


5.1.2 切换 元 和 素 的 显示 状态 


在 显示 和 隐藏 之 间 切 换 元 素 的 状态 (正如 之 前 为 可 折 芋 模块 示例 所 做 的 那样 ) 是 一 件 司 空 见 
惯 的 事情 ， 因 此 jQuery 定义 了 toggle() 方 法 使 其 更 加 简单 。 

为 可 折 镭 模块 应 用 toggle() 方 法 , 观察 它 是 如 何 简化 代码 清单 5-1 中 的 代码 。 代码 清单 5-2 
只 显示 了 重 构 页 面 的 就 绪 处 理 右 (不 需要 其 他 的 改变 )， 改 劲 的 部 分 以 粗 体 突出 显示 。 完 整 的 页 
面 代码 可 以 在 文件 chapter5/collapsible.module.take.2.html 中 找到 。 


代码 清单 5-2 使 用 toggle() 人 简化 的 可 折 革 模块 的 代码 


Ss(function() { 








Ss('div.caption img') .click(function()t 
s(this) .closest('div.module') .find('div.body') .toggle()， 
了 


]) 

注意 ,我 们 不 再 需要 使 用 条 件 判断 语句 来 决定 是 应 该 隐藏 还 是 显示 模块 的 主体 ; toggle () 
为 我 们 完成 了 切换 显示 状态 的 任务 。 这 允许 我 们 在 很 大 程度 上 简化 代码 , 同时 也 不 需要 将 主体 引 
用 保存 在 变量 中 了 。 

使 用 这 个 方法 让 元 素 瞬间 显示 和 消失 非常 方便 , 不 过 有 时 我 们 希望 这 种 转变 不 要 太 突 然 。 下 
面 来 看 看 有 哪些 可 用 的 功能 。 


5.2 用 动画 改变 元 素 的 显示 状态 


人 类 的 认 知 能 力 就 是 这 样 ,元素 项 的 突然 出 现 或 者 消失 会 让 人 人 不安。 如果 在 错误 的 时 间 有 上 了 
下 眼睛 ， 就 可 能 会 错过 转变 的 过 程 ， 留 下 来 的 疑问 是 :“ 刚 才 发 生 了 什么 ?” 

短 时 间 的 渐变 过 程 有 助 于 我 们 了 解 什么 正在 改变 ， 以 及 如 何 从 一 个 状态 转换 到 另 一 个 状 
这 也 正 是 jQuery 核心 特效 起 作用 的 地 方 。 总 共有 3 组 特效 类 型 : 
口 显示 和 隐藏 (在 5.1 廊 中 显示 和 隐藏 方法 还 有 一 些 没 有 介绍 的 内 容 ); 
口 淡 入 和 淡出 ; 
口 消 下 和 请 上 。 
下 面 逐 一 考察 每 一 组 特效 。 


5.2.1 渐变 地 显示 和 隐藏 元 素 
show()、hide() 和 toggle() 方 法 实际 上 比 上 一 节 介 绍 的 要 复杂 一 点 。 当 不 带 参 数 调用 时 ， 











太 
JUDA 
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这 些 方法 实现 对 包装 元 系 显示 状态 的 简单 操作 , 使 这 些 元 系 从 显示 人 带 上 了 瞬间 显示 或 者 隐藏 。 但 是 当 
传人 参数 时 ,这 些 效 果 是 用 动画 方式 来 呈现 的 ,因此 受 影 啊 元 素 的 显示 状态 将 在 短 时 间 内 持续 改变 。 
接 看 来 看 下 这 些 方 法 的 完整 语法 。 

















方法 语法 : hide 
hide(speed, callback) 
使 包装 集中 的 元 素 变 成 隐藏 状态 。 如 果 不 带 参数 调用 ， 则 通过 设置 元 素 的 display 样式 属性 
值 为 none 使 操作 在 瞬间 完成 。 如 果 指 定 了 speed 参数 ， 则 通过 调整 元 素 的 宽度 、 高 度 和 不 
透明 度 为 零 , 使 元 素 在 一 段 时 间 内 逐渐 隐藏 ， 在 元 素 完 全 隐藏 后 再 设置 它们 的 display 样式 
属性 为 none， 从 显示 器 上 删除 元 素 。 
可 选 的 函数 ， 指 定 在 动画 完成 时 调用 的 回调 函数 


参数 
speed (数字 | 字符 串 ) 可 选项 ， 用 于 指定 特效 持续 的 时 间 ， 可 以 是 若干 宫 秒 ， 也 可 以 


是 以 下 预定 义 字 符 串 之 一 : slow、normal 或 者 fast。 如 果 省 略 此 参数 ， 则 不 
会 产生 动画 ， 并 上 且 立即 从 显示 器 上 删除 元 素 
callback (函数 ) 可 选 的 函数 ， 当 动画 结束 时 调用 。 不 向 此 函数 传递 任何 参数 ， 但 是 将 函数 
上 下 文 (this ) 设置 为 执行 动画 的 元 素 。 为 经 历 动画 的 每 个 元 素 调用 此 回调 函数 
返回 值 


包装 集 


方法 语法 : show 
show(speed, callback) 
使 包装 集中 任何 隐藏 的 元 素 显 示 出 来 。 如果 不 带 参 数 调用 , 则 设置 元 素 的 display 样式 属性 
值 为 一 个 合适 的 值 (block 或 者 inline ) 使 操作 在 瞬间 完成 。 如 果 指 定 了 speed 参数 ， 则 
通过 调整 使 元 素 的 宽度 、 高 度 变 为 全 尺寸 并 提高 不 透明 度 ， 使 元 素 在 一 段 指 定 的 时 间 内 逐渐 


显示 出 来 。 
可 选 的 函数 ， 指 定 当 动画 完成 时 调用 的 回调 函数 

参数 

Speed (数字 | 字符 串 ) 可 选项 ， 用 于 指定 特效 持续 的 时 间 ， 可 以 是 若干 总 秒 ， 也 可 以 


是 以 下 预定 义 字 符 串 之 一 : slow、normal 或 者 fast。 如 果 省 略 此 参数 ， 则 不 

会 产生 动画 ， 并 且 元 素 会 立即 从 显示 器 上 显示 出 来 
Callback ”( 遂 数 ) 可 选 的 函数 ， 当 动画 结束 时 调用 。 不 向 此 函数 传递 
二 


任何 参数 ， 但 是 将 


函数 上 下 文 (this ) 设置 为 执行 动画 的 元 素 。 为 经 历 动画 的 每 个 元 素 调用 此 
回调 函数 

返回 值 

包装 集 
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a re toggle 
toggle(speed, callback) 
在 任何 隐藏 的 包装 元 素 上 执行 show() ， 同 时 在 任何 非 隐 藏 的 包装 元 素 上 执行 hide ()。 参 赔 
这 两 个 方法 的 语法 描述 以 便 了 解 它们 的 语义 


参数 

speed (数字 | 字符 串 ) 可 选项 ， 用 于 指定 特效 持续 的 时 间 ， 可 以 是 若干 毫秒 ， 也 可 以 
是 以 下 预定 义 字 符 串 之 一 : slow、normal 或 者 fast。 如 果 省 略 此 参数 ， 则 不 
会 产生 动画 


callback (函数 ) 一 个 可 选 的 函数 ， 当 动画 结束 时 调用 。 不 向 此 函数 传递 任何 参数 ， 但 
是 将 函数 上 下 文 (this ) 设置 为 执行 动画 的 元 素 。 为 经 历 动画 的 每 个 元 素 调 用 
此 回调 函数 

返回 值 


包 靖 集 








我 们 可 以 使 用 toggle() 方 法 的 男 一 个 变 体 来 进行 更 多 的 控制 。 


a SS toggle 
toggle (condition,) 
基于 传 入 条 件 的 运算 结果 显示 和 隐藏 匹配 的 元 素 。 如 果 结 果 为 true, 则 显示 元 素 ; 否则 隐藏 
元 素 


参数 

condition (布尔 ) 确定 是 显示 元 素 (如 果 为 结果 true )， 还 是 隐藏 元 素 ( 如 果 结 果 为 
false ) 

返回 值 

包头 集 








下 面 对 可 折 和 县 模块 进行 第 3 次 修改 ， 以 动画 方式 来 展开 和 折 麦 各 节 。 

有 了 前 面 的 信息 ， 你 可 能 认为 代码 清单 5-2 需要 进行 的 唯一 修改 是 将 toggle () 方 法 的 调用 
方式 改 成 : 

ee 

你 是 对 的 。 

但 是 没 这 么 快 ! 因为 那 太 简单 了 ， 让 我 们 借 此 机 会 为 模块 添加 一 些 很 炫 的 效果 。 

比方 说 ,为 了 给 用 户 一 个 明确 无 误 的 视觉 线索 ， 当 模块 处 于 折 著 状态 时 ,我 们 希望 模块 标题 
栏 显 示 不 同 的 背景 。 我 们 可 以 在 动画 开始 前 就 做 出 改变 , 但 是 如 果 能 在 动画 结束 后 实现 改变 会 更 
加 优雅 。 
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我 们 不 能 在 调用 动画 方法 后 立即 进行 处 理 ， 因 为 动画 不 会 阻塞 JavaScript 的 执行 。 与 动画 方 
法 调用 紧 跟 着 的 语句 会 立即 执行 ， 甚 至 有 可 能 在 动画 开始 之 前 执行 。 

不 过 ， 这 就 是 使 用 toggle() 方 法 来 注册 回调 函数 的 用 武之 地 。 

将 要 采取 的 方法 是 , 在 动画 结束 后 为 模块 添加 一 个 类 名 来 识别 其 处 于 折 针 状态 ,而 在 模块 处 
于 非 折 县 状态 时 删除 此 类 名 。CSS 规则 将 负责 余下 的 细节 。 

你 最 初 的 想法 可 能 是 使 用 css () 为 标题 栏 直接 添加 一 个 background 样式 属性 , 但 这 人 简直 就 
是 杀 鸡 用 牛刀 。 

模块 标题 “正常 状态 ”的 CSS 规则 ( 可 以 在 文件 chapter5/module.css 中 找到 ) 如 下 所 示 : 


div.module div.caption { 
background: black url('module.caption.backg.png').; 














ee 
我 们 也 添加 了 另外 一 个 规则 : 


div.module.rolledup div.caption { 
background: black url('module.caption.backg.rolledup.png'); 


} 

只 要 父 模块 拥有 rolledup 类 ， 第 二 个 规则 就 会 改变 标题 栏 的 背景 图 片 。 因 此 ， 为 了 改变 显 
示 效 果 ， 所 要 做 的 就 是 在 适当 的 时 间 点 添加 或 删除 模块 的 rolledup 类 。 

代码 清单 5-3 显示 了 修改 后 的 就 绪 处 理 夯 的 代码 。 


代码 清单 5-3 ”模块 的 动画 版 本 ,拥有 可 以 如 魔术 般 进 行 改变 的 标题 栏 
Ss(function() { 


Ss('div.caption img') .click(function()t 
S(this).closest('div.module') .find('div.body') 
.toggle('slow',function()t{ 
$ (this) .closest('div.module') 
.toggleClass('rolledup',$ (this).is(':hidden'));，; 


修改 后 的 页 面 可 以 在 文件 chapter5/collapsible.list.take.3.html 找到 。 

我 们 知道 有 很 多 像 我 们 一 样 爱 修 修改 改 的 人 , 为 此 创建 了 一 个 方便 的 工具 , 可 用 来 进一步 研 
究 这 些 工具 的 用 法 和 剩余 的 特效 方法 。 

引入 jQuery 特效 实验 室 页 面 

在 第 2 曹 中 ， 我 们 引入 了 实验 室 页面 的 概念 ， 以 便 对 jQuery 选择 需 进 行 练习 。 本 和 曹 ， 我 们 
创建 了 一 个 jQuery 特效 实验 室 页 面 chapter5/lab.effects.html， 可 以 用 来 探索 jQuery 特效 的 操作 。 

在 浏览 器 中 加 载 此 页 面 ， 结 果 如 图 5-3 所 示 。 
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BoOO jQuery Effects Lab Page 三 中 


[ed © ho/ /ocahost/jaia2/chapters /lab.effects.him Bo-coge 








| jQuery Effects Lab Page 














Effect: @ Show © Hide © Toggle 
Q Fade In 名 Fade Out ©Q Fade To 
© Slide Down © slide Up © Slide Toggle 


Speed: @ None O 〇 Slow © Normal © Fast © Milliseconds; 


Opacity: 9% (for "Fade to”") 


Apply | 


Applied command: 























图 5-3 ”jQuery 特效 实验 室 页 面 的 初始 状态 ， 用 来 协助 研究 jQuery 特效 方法 的 操作 





?e 这 个 实验 室 页 面包 含 两 个 主要 面板 : 控制 面板 用 来 指定 将 要 应 用 的 特效 , 男 一 个 面板 包含 将 
要 应 用 特效 的 4 个 测试 对 象 元 素 。 
“他 们 不 会 这 么 笨 吧 ? ”你 可 能 会 想 。 “明明 只 有 两 个 测试 对 象 。 
不 ， 本 书 的 作者 没有 遗漏 任何 内 容 。 的 确 有 4 个 元 素 , 但 是 其 中 的 2 个 元 素 (一 个 是 用 来 显 
示 文 本 的 <div> 元 素 ， 男 一 个 是 图 片 元 系 ) 在 初始 时 是 隐藏 的 。 
A 下 面 使 用 这 个 页 面 来 演示 下 目前 为 止 已 讨论 方法 的 运行 过 程 。 在 浏览 帮 中 加 载 此 页 面 , 然后 
跟着 做 下 面 的 练习 。 
口 练习 1 一 一 初始 页 面 加 载 后 保持 控件 的 状态 不 变 , 然后 单 击 Apply 按钮 。 这 将 会 不 带 参 数 
地 执行 show () 方 法 。 应 用 的 语句 显示 在 Apply 按钮 下 面 供 参考 。 注 意 那 2 个 初始 隐藏 的 
测试 对 象 元 素 是 如 何 立 即 显 示 的 。 如 果 你 很 好 奇 为 什么 最 右 侧 的 皮带 图 片 看 起 来 有 点 褪 
色 ， 那 是 因为 我 们 有 意 地 设置 它 的 不 透明 度 为 50%。 
口 练习 2 一 一 选择 Hide 单 选 按钮 ， 然 后 单 击 Apply 来 执行 无 参数 的 nige () 方 法 。 所 有 的 测 
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试 对 象 立即 消失 了 。 请 特别 注意 ， 这 些 对 象 原 来 所 在 的 面板 收 了 起 来 。 这 表明 这 些 元 素 
己 经 从 显示 分 上 完全 删除 ， 而 不 是 被 隐 闫 起 来 。 





注意 D00000000000000000000000000000000[ 吕 0000 
DDO UUUUUUUUUU CSSU display U0 
UUUD noneDDOUUDUUOUUUUUUUUU DOMUOUDOUUUUUU0UUUNUUUD 
U DOMUUUDD 


口 练习 3 一 一 选择 Toggle 单 选 按钮 ， 然 后 单 击 Apply。 再 次 单 击 Apply， 继 续 单 击 。 你 将 会 
注意 到 每 次 执行 toggle() 都 将 切换 测试 对 象 的 显示 状态 〈 显示 或 隐藏 )。 

口 练习 4 一 一 重新 加 载 页 面 以 便 使 所 有 控件 恢复 到 它们 的 初始 状态 (在 Firefox 或 者 其 他 Gecko 
浏览 锅 中 ， 请 将 焦点 移 到 地 址 栏 上 ， 然 后 单 击 Enter 键 一 一 只 单 击 重新 加 载 按钮 不 会 重 置 
表单 元 素 " )。 选 择 Toggle, 然后 单 击 Apply。 注意 初始 时 可 见 的 两 个 对 象 是 如 何 消失 的 以 
及 隐藏 的 两 个 对 象 是 如 何 显示 出 来 的 。 上 述 过 程 证 明了 toggle() 方 法 单独 作用 于 每 一 个 
包 冯 元 素 ， 显 示 那 些 隐藏 的 元 素 并 隐藏 那些 显示 的 元 素 。 

口 练习 5 一 一 我 们 将 在 这 个 练习 中 进入 动画 领域 。 刷 新 页 面 ， 保 持 Show 的 选中 状态 ， 并 设 
置 Speed 为 Slow。 单 击 Apply， 并 仔细 观察 测试 对 象 。 那 两 个 隐藏 的 元 又 不 是 突然 出 现 ， 
而 是 从 左上 角逐 淘 伸 展开 来 。 如 果 你 想 真 正 看 到 发 生 了 什么 事情 ， 那 请 刷新 页 面 ， 选 择 
Milliseconds ( 毫秒 ) 来 设置 速度 并 输入 10 000 作为 速度 值 。 这 将 把 特效 的 持续 时 间 延 长 
到 ( 令 人 心烦 的 )10 秒 ， 这样 就 有 足够 的 时 间 来 观察 特效 的 行为 。 

口 练习 6 一 一 选择 Show、Hide 和 Toggle 的 不 同 组 合 以 及 不 同 的 速度 来 测试 这 些 特 歼 ， 直 到 
你 感觉 已 经 很 好 地 竺 握 了 对 它们 的 操作 。 

有 了 jQuery 特效 实验 室 页 面 以 及 第 一 组 特效 是 如 何 运 行 的 知识 ， 下 面 来 看 看 下 一 组 


















































5.2.2 ”使 元 素 淡 入 和 淡出 





如 采 仔 细 观 察 过 show() 和 hiade () 特 效 的 运行 过 程 ， 你 会 注意 到 它们 不 仅 缩放 元 素 的 矿 二 
( 革 大 或 收缩 到 合理 矿 寸 )， 而 且 在 元 素 扩 大 或 者 缩小 时 会 调整 不 透明 度 。 下 一 组 特效 fadeIn () 
和 fadqeout () 只 会 影 啊 元 又 的 不 透明 度 。 

除了 缺少 缩放 功能 , 这 些 方法 的 工作 方式 类 似 于 show() 和 hige() 的 动画 形式 。 它们 的 语法 
如 下 所 示 。 














人 这 是 由 于 Firefox 中 表单 自动 完成 导致 的 问题 ， 可 以 设置 表单 的 autocomplete 特性 为 off 来 修正 这 个 问题 ， 
参考 : https:/developermozilla.org/en/How to Turn Off Form Autocompletion 。 
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方法 语法 : fadeIn 
fadeIn(speed, callback) 
通过 将 元 素 的 不 透明 度 提 高 到 其 初始 值 来 使 所 有 匹配 的 隐藏 元 素 显 示 出 来 。 这 个 值 要 么 是 最 
初 应 用 到 元 素 的 不 透明 度 ， 要 么 是 100%。 不 透明 度 改 变 的 持续 时 间 由 speed 参数 决定 。 只 
有 隐藏 的 元 素 受 影响 


参数 
speed (数字 | 字符 串 ) 指定 特效 持续 的 时 间 ， 可 以 是 若干 毫秒 ， 也 可 以 是 以 下 预定 


义 字 符 串 之 一 :slow、notrmal 或 者 fast。 如 果 省 略 此 参数 , 则 默认 为 normal 
callback (函数 ) 一 个 可 选 的 函数 ， 当 动画 结束 时 调用 。 不 向 此 函数 传递 任何 参数 ， 
但 是 将 函数 上 下 文 (this ) 设置 为 执行 动画 的 元 素 。 为 经 历 动画 的 每 个 元 素 


调用 此 回调 函数 
返回 值 
包 闭 和 集 





方法 语法 : fadeOut 
fadeOut (speed, callback,) 
通过 将 元 素 的 不 透明 度 降低 到 0%， 然 后 从 显示 器 上 删除 该 元 素 ， 来 从 显示 器 上 删除 任何 显 
示 的 匹配 元 素 。 不 透明 度 改 变 的 持续 时 间 由 speed 参数 决定 。 只 有 显示 的 元 素 受 影响 


参数 

Speed (数字 | 字符 串 ) 指定 特效 持续 的 时 间 ， 可 以 是 若干 毫秒 ， 也 可 以 是 以 下 预定 
义 字 符 串 之 一 :slow notrmal 或 者 fast 如 果 省 略 此 参数 , 则 默认 为 normal 

callback (函数 ) 一 个 可 选 的 函数 ， 当 动画 结束 时 调用 。 不 向 此 函数 传递 任何 参数 ， 
但 是 将 函数 上 下 文 (this ) 设置 为 执行 动画 的 元 素 。 为 经 历 动画 的 每 个 元 
素 调 用 此 回调 函数 

返回 值 

包 蒜 集 














A 让 我 们 使 用 jQuery 特效 实验 室 页 面 实现 更 多 有 趣 的 效果 。 打 开 实 验 室 页 面 ， 运 行 一 组 类 似 
于 前 一 节 的 练习 题 , 不 过 这 次 选择 Fade In 和 Fade Out( 现在 还 不 用 担心 Fade To , 马上 会 介绍 它 )。 
值得 重点 关注 的 是 ， 当 调整 元 系 的 不 透明 度 时 ,jQuery 的 hide()、show()、fadeIn() 以 
及 fadeout () 特效 会 记 住 元 素 不 透明 度 的 初始 值 并 遵守 这 个 仁 。 在 实验 室 页 面 中 ， 在 隐藏 最 右 
边 的 皮 市 图 片 之 前 ， 我 们 有 意 地 设置 它 的 初始 不 透明 度 为 50%。 在 应 用 jQuery 特效 改变 不 透明 
度 的 整个 过 程 中 ， 它 的 初始 值 从 来 就 没有 被 禾 盖 过 。 
在 实验 室 页 面 多 做 些 练习 题 ， 尽 量 玖 练 掌 握 消 退 特 效 的 操作 。 
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jQuery 通过 fadeTo () 方 法 提供 了 万 一 个 特效 。 这 个 特效 调整 元 系 的 不 透明 度 ， 和 前 面 孝 罕 
过 的 消退 特效 一 样 ， 但 是 它 绝对 不 会 从 显示 带 上 删除 元 系 。 在 使 用 实验 室 页 面 练 习 fadeTo() 方 
法 之 前 ， 先 来 看 下 它 的 语法 。 








方法 语法 : fadeTo 
fadeTo(speed, opacity, callback) 
逐渐 改变 包装 元 素 的 不 透明 度 ， 从 它们 的 当前 值 到 opacity 指定 的 新 值 
speed (数字 | 字符 事 ) 指定 特效 持续 的 时 间 ， 可 以 是 若干 毫秒 ， 也 可 以 是 以 下 预定 义 
字符 串 之 一 : slow、normal 或 者 fast。 如 果 省 略 此 参数 ,， 则 默认 值 为 normal 
opacity (数字 ) 将 要 调整 的 元 素 的 目标 不 透明 度 ， 指 定 的 取 值 范围 是 0.0~1.0 
callback (函数 ) 一 个 可 选 的 函数 ， 当 动画 结束 时 调用 。 不 向 此 函数 传递 任何 参数 ， 但 
是 将 函数 上 下 文 (this ) 设置 为 执行 动画 的 元 素 。 为 经 历 动 画 的 每 个 元 素 调用 





此 回调 函数 
返回 值 
包装 集 
与 其 他 特效 在 隐藏 和 显示 元 系 的 同时 调整 不 透明 度 不 同 ,fadqeTo () 不 会 记 住 元 系 的 初 
始 不 透明 度 。 这 是 合理 的 ， 因 为 这 个 特效 的 根本 目的 就 是 为 了 显 式 地 改变 不 透明 度 到 指定 
的 值 。 











六 在 浏览 器 下 打开 实验 室 页 面 ， 让 所 有 元 素 都 显示 出 来 (现在 你 应 该 知道 怎么 做 了 )。 然 后 做 
下 面 的 练习 。 

口 练习 1 一 一 选择 Fade To 和 一 个 足够 慢 的 速度 值 以 便 观 察 行为 ， 可 以 设置 为 4000 宣 秒 。 
现在 设置 Opacity 字段 ( 期望 值 为 0~100 之 间 的 整数 ， 当 传人 方法 时 会 转换 为 0.0~1.0 
之 间 的 值 ) 为 10， 然 后 单 击 Apply。 测 试 对 象 将 会 在 4 秒 的 时 间 内 淡出 至 10% 的 不 透 
明度 。 

口 练习 2 一 一 设置 不 透明 度 为 100， 然 后 单 击 Apply。 所 有 的 元 素 (包括 初始 半 透 明 的 皮带 
图 片 ) 都 被 调整 为 完全 不 透明 。 

D 练习 3 一 一 设置 不 透明 度 为 0， 然 后 单 击 Apply。 所 有 的 元 素 都 谈 出 为 不 可 见 状 态 ， 但 是 
注意 一 旦 它们 消失 后 ,包含 这 些 元 素 的 模块 并 没有 同上 收 起 。 和 fadeout () 特效 不 同 ， 
fadeTo() 绝 对 不 会 从 显示 右上 删除 元 紊 ， 即 使 这 些 元 素 已 经 完全 不 可 见 了 。 

继续 练习 Fade To 特效 ， 掌 握 它 的 工作 原理 ， 然 后 准备 学 习 下 一 组 特效 。 
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5.2.3 上 下 滑动 元 素 


男 外 一 组 用 于 隐藏 和 显示 元 又 的 特效 (slidqepowm() 和 slideUp() ) 与 hide() 和 show() 
的 工作 方式 也 很 类 似 ， 只 不 过 当 元 又 在 显示 的 时 候 好 像 是 从 顶部 消 下 ,而 在 隐 韦 的 时 候 好 像 是 滑 
人 顶部。 

与 hide() 和 show() 一 样 ， 滑 动 特效 也 有 一 个 相关 的 方法 来 切换 元 素 的 隐藏 和 显示 状态 : 
slideToggle()。 你 应 该 已 经 很 熟悉 这 类 方法 的 语法 了 ， 如 下 所 示 。 

















方法 语法 : slideDown 


slideDown(speed, callback) 


通过 逐渐 增加 元 素 的 重 直 尺寸 来 使 所 有 匹配 的 隐藏 元 素 显 示 出 来 。 只 有 隐藏 的 元 素 受 影响 
参数 
Speed (数字 | 字符 串 ) 指定 特效 持续 的 时 间 ， 可 以 是 若干 毫秒 ， 也 可 以 是 以 下 预定 


义 字 符 串 之 一 :slLow\、normal 或 者 fast。 如 果 省 略 此 参数 , 则 默认 为 normal 
callback (函数 ) 一 个 可 选 的 函数 ， 当 动画 结束 时 调用 。 不 向 此 函数 传递 任何 参数 ， 
但 是 将 函数 上 下 文 (this ) 设置 为 执行 动画 的 元 素 。 为 经 历 动 画 的 每 个 元 素 





调用 此 回调 函数 
返回 值 
包 闭 和 集 


方法 语法 : slideUp 
slideUp (speed, callback) 
通过 逐渐 减少 元 素 的 重 直 尺寸 来 从 显示 器 上 删除 匹配 的 显示 元 素 


参数 
speed ( 数字 | 字符 串 ) 指定 特效 持续 的 时 间 ， 可 以 是 若干 毫秒 ， 也 可 以 是 以 下 预定 义 


字符 串 之 一 : slow、normal 或 者 fast。 如 果 省 略 此 参数 ， 则 默认 为 normal 

callback ( 函数 ) 一 个 可 选 的 函数 ， 当 动画 结束 时 调用 。 不 向 此 函数 传递 任何 参数 ， 但 
是 将 函数 上 下 文 (this ) 设置 执行 动画 的 元 素 。 为 经 历 动画 的 每 个 元 素 调 用 此 
回调 函数 
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方法 语法 : slideToggle 
slideToggle(speed, callback) 


在 任何 隐藏 的 包装 元 素 上 执行 slideDown() ， 同 时 在 任何 显示 的 包装 元 素 上 执行 
sliqeUp()。 请 参阅 这 两 个 方法 的 语法 描述 以 便 了 解 它们 的 语义 


speed ( 数字 | 字符 囊 ) 可 选项 ， 用 于 指定 特效 持续 的 时 间 ， 可 以 是 若干 毫秒 数 ， 也 可 


尺 是 以 下 预定 义 字 符 串 之 一 : slow、normal 或 者 fast。 如 果 省 略 此 参数 ， 则 
默认 为 normal 

callback ( 函数 ) 一 个 可 选 的 函数 ， 当 动画 结束 时 调用 。 不 向 此 函数 传递 任何 参数 ， 但 
是 将 函数 上 下 文 (this ) 设置 为 执行 动画 的 元 素 。 为 经 历 动 画 的 每 个 元 率 调 用 
此 回调 函数 

返回 值 

包装 集 

了 除了 显示 和 隐藏 元 素 的 方式 不 同 之 外 , 这 些 特 效 和 其 他 显示 和 隐 北 特效 非常 相似 。 为 了 明确 
理解 这 一 点 ， 打 开 jQuery 特效 实验 室 页 面 ， 运 行 一 些 类 似 于 之 前 应 用 了 其 他 特效 的 练习 题 。 





5.2.4 停止 动画 


有 时 我 们 可 能 出 于 茶 种 原因 在 动画 开始 后 就 终止 动画 。 这 可 能 是 由 于 一 个 用 户 事件 表明 有 别 
的 事情 将 要 发 和 后， 或 者 是 因为 想 要 开始 一 个 全 新 的 动画 。stop () 命令 可 以 实现 这 个 目的 。 











DT Ye 赤 。 stop 
stop(clearQueue, gotoEnd) 
停止 匹配 集 元 素 上 正在 进行 的 所 有 动画 


clearQueue (布尔 ) 如 果 指 定 为 true， 则 不 仅 停止 当前 动画 ， 而 且 停 止 在 动画 队列 中 
正在 等 待 执行 的 所 有 其 他 的 动画 (动画 队列 ? 很 快 就 会 介绍 到 …… ) 

gotoEnd (布尔 ) 如 果 指 定 为 true， 则 使 当前 动画 执行 到 其 逻辑 结 来 (而 不 是 仅仅 
停止 动画 ) 

返回 值 

包装 集 














注意 ， 对 动画 元 素 所 做 的 任何 改变 都 将 继续 有 效 。 如 采 硕 望 恢复 元 素 的 初始 状态 , 那 我 们 束 
需要 通过 css () 方 法 或 者 类 似 的 方法 将 元 素 的 CSS 信 重 置 为 其 初始 但 。 

顺便 提 一 下 ， 可 以 使 用 一 个 全 局 标志 来 完全 禁止 所 有 的 动画 。 设 置 jQuery .fx.off 标志 为 
true 将 导致 所 有 的 特效 立即 发 生 ， 而 没有 动画 过 程 。 我 们 将 在 第 6 草 中 正式 介绍 这 个 标志 和 其 
他 的 jQuery 标志 。 

目前 为 止 我 们 已 经 了 解 了 核心 jQuery 的 内 置 特 效 ， 下 面 来 研究 如 何 编写 和 目 定 义 的 特效 ! 
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5.3 创建 目 定义 动画 

jQuery 有 意 地 保持 少量 核心 特效 的 目的 是 为 了 尽量 减少 核心 jQuery 的 体积 ， 同 时 期 望 页 面 
开发 者 使 用 插件 〈 包 括 将 在 第 9 革 中 开始 探讨 的 jQuery UI ) 来 酌情 添 加 更 多 的 动画 。 编 写 目 定 
义 动画 非常 信 单 。 

jQuery 公开 了 animate() 包 装 各 方 法 ， 它 允许 为 包 浅 集中 的 元 系 应 用 自 定 义 动画 特效 。 来 
看 下 它 的 语法 。 














方法 语法 : animate 

animate (properties, duration, easing, callback) 

animate (properties, options) 

将 properties 和 easing 参数 指定 的 动画 应 用 到 包装 集中 的 所 有 成 员 上 。 可 以 指定 一 个 回 

调 函 数 (可 人选)， 在 动画 完成 时 调用 。 另 一 种 格式 除了 指定 properties 之 外 ， 还 指定 了 一 

组 ODt iorns 

参数 

properties (对象 ) 一 个 散 列 对 象 ， 指 定 动画 结束 时 所 支持 的 CSS 样式 应 该 达到 的 值 。 
通过 调整 元 素 样式 属性 的 当前 值 到 此 散 列 对 象 中 指定 的 值 来 产生 动画 (确保 
在 指定 多 字 属 性 时 使 用 骆驼 拼写 法 "。) 

duration (数字 | 字符 串 ) 可 选项 ， 用 于 指定 特效 持续 的 时 间 ， 可 以 是 若干 毫秒 ， 也 可 以 
是 以 下 预定 义 字 符 串 之 一 : slow、normal 或 者 fast。 如 果 省 略 或 者 指定 为 0， 
则 不 会 有 动画 过 程 , 并 且 立 即将 元 素 指定 的 propetrties 同步 地 设置 为 目标 值 

easing ( 当 符 串 ) 一 个 函数 的 名 称 ( 可 选 ) 用 于 指定 动画 缓 动 特效 ,。 缓 动 函数 必须 通 
过 名 称 来 注册 ,通常 由 插件 提供 。 核 心 jQuery 提供 了 两 个 缓 动 函 数 ， 分 别 注册 
为 linear 和 swing (可 查看 第 9 章 里 由 jQuery UI 提供 的 缓 动 函 数列 表 。) 





ee ( 函数 ) 一 个 可 选 的 函数 ， 当 动画 结束 时 调用 。 不 向 此 函数 传递 任何 参数 ， 
但 是 将 函数 上 下 文 (this ) 设置 为 执行 动画 的 元 素 。 为 经 历 动画 的 每 个 元 素 
调用 此 回调 函数 

options ( 对象 ) 使 用 一 个 散 列 对 象 来 指定 动画 参数 值 ， 支 持 的 属性 如 下 所 示 : 


参考 前 面 对 duration 参数 的 描述 





DD duration 











D easing 参考 前 面 对 easing 参数 的 描述 

D complete 动画 完成 时 调用 的 函数 

D queue 如 果 为 false， 则 动画 立即 运行 ,无 需 排 队 

口 step 一 一 在 动画 的 每 一 步 都 会 调用 的 回调 函数 。 步 骤 序 号 和 内 部 特效 





对 象 (其 中 不 会 包含 太 多 页 面 开 发 者 感 兴趣 的 东西 ) 将 被 传 入 此 回调 
马 数 。 函 数 的 上 下 文 被 设置 为 正在 执行 动画 的 元 素 











G 这 里 指 的 是 一 个 词 首 字母 小 写 ， 后 面 每 个 词 首 字母 大 写 的 写法 ， 比 如 borderWidth, marginLeft。 
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我 们 可 以 通过 提供 一 套 CSS 样式 属性 以 及 目标 值 ( 随 着 动画 的 进行 ， 这 些 属性 将 问 此 目标 
值 聚 集 ) 来 创建 自 定义 属性 ,动画 从 元 素 的 初始 样式 值 开 始 , 回 目 标 值 的 方向 调整 样式 值 来 运行 。 
特效 过 程 中 样式 的 中 间 值 ( 由 动画 引擎 自动 处 理 ) 是 由 动画 的 持续 时 间 和 绥 动 靖 数 决定 的 。 

指定 的 目标 值 可 以 是 绝对 值 也 可 以 是 相对 于 起 点 的 值 。 为 了 指定 相对 值 , 要 为 目标 值 添加 += 
或 者 -= 前 缀 ,来 分 别 表 明正 方 回 或 负 方 回 的 相对 目标 值 。 

术语 缓 动 (easing ) 用 来 摘 述 动画 的 过 程 和 帧 速度 的 处 理 方 式 。 通 过 对 动画 持续 时 间 和 当前 
时 间 点 应 用 一 些 花哨 的 数学 公式 , 可 以 让 特效 产生 一 些 有 趣 的 变化 。 编写 绥 动 函 数 是 一 个 复 淋 的 
小 众 主 题 , 通常 只 有 最 铁杆 的 插件 开发 者 才 会 对 此 感 兴 趣 。 本 书 中 ,我 们 不 打算 深 入 探讨 日 定义 
绥 动 函数 这 个 主题 。 在 第 9 章 中 研究 jQuery UI 时， 我 们 将 看 到 更 多 的 缓 动 函数 。 

在 默认 情况 下 ,动画 会 被 添加 到 执行 队列 中 ( 随后 会 对 此 进行 详细 介绍 ) 为 同一 个 对 象 应 用 
多 个 动画 会 促使 它们 依次 运行 。 如 果 和 希望 以 并 行 的 方式 运行 动画 , 可 以 将 queue 选项 设置 为 false。 

可 以 用 动画 方式 展现 的 CSS 样式 属性 列表 局 限于 能 够 接受 数字 值 的 属性 ， 因 为 对 这 些 属性 
而 言 , 要 有 一 个 从 初始 信 到 目标 值 的 逻辑 递 进 过 程 。 限 定 为 数字 值 是 完全 合理 的 一 一 我 们 如 何 设 
想 一 个 非 数 值 的 属性 (例如 background-image ) 从 开始 值 到 结束 值 的 逻辑 过 程 呢 ? 对 于 表示 尺 
寸 的 值 ，jQuery 假设 其 默认 的 单位 是 像素 ,但 是 也 可 以 通过 包含 em 或 者 $ 后 级 来 指定 em 单位 或 
者 百分比 。 

常见 的 动画 样式 属性 包括 top、left、width、height 和 opacity。 不 过 只 要 我 们 想 实 现 
的 特效 有 意义 ,数字 值 的 样式 属性 例如 字体 大 小 、 外 边 距 、 内 边 距 以 及 边框 尺寸 也 能 够 以 动画 方 
式 运 行 。 





















































注意 jQuery UIDD000000 CSS000000000000 9000 jQuery VID ODO 
UUUDUUUUD 


除了 指定 目标 属性 的 值 , 我 们 也 可 以 指定 如 下 字符 串 之 一 : hide、show 或 者 toggle。 jQuery 
将 根据 这 个 字符 串 的 规范 来 计算 出 合适 的 结束 值 。 例 如， 指定 opacity 属性 为 hide， 将 会 导致 
元 系 的 不 透明 度 减少 为 0。 使 用 这 些 特殊 字符 串 中 的 任意 一 个 都 会 有 额外 的 效果 ， 将 目 动 从 显示 
天 上 显示 或 者 删除 元 素 〈 就 像 nide() 和 show() 方 法 一 样 )， 需 要 注意 的 是 toggle 会 记 住 初始 
状态 ， 因 此 随后 指定 目标 属性 值 为 toggle 会 恢复 元 系 的 初始 状态 。 

当 我 们 介绍 核心 动画 时 , 你 注意 到 消退 特效 的 切换 方法 了 吗 ? 使 用 animate() 和 toggle 来 
创建 一 个 简单 的 自 定 义 动画 可 以 很 容易 地 解决 这 个 问题 ， 如 下 所 示 : 

$s('.animateMe') .animate({opacity: 'toggle'},'slow'); 

将 这 句 代 码 引 入 下 一 个 逻辑 步骤 (创建 一 个 包装 需 图 数 )， 编 写 代码 如 下 : 

s.fn.fadeToggle = function(speed)t 


return this.animate({opacity: 'toggle'},speed): 


局 
接 下 来 再 编写 几 个 自 定义 动画 。 
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5.3.1 目 定 义 缩放 动画 


考虑 一 个 简单 的 缩放 动画 , 用 来 将 元 了 率 的 尺寸 调整 为 其 原始 尺寸 的 两 倍 。 下 面 编写 该 动画 的 
代码 ， 如 代码 清单 5-4 所 示 。 


代码 清单 5-4 目 定 义 缩 放 动 画 











$('.animateMe') .each (function()t 
S(this) .animatel(t 饥 历 每 一 个 匹配 的 元 素 
width: S(ths).wWiath() * 2， 
height: S(ths) .height() * 2 
vy 上 外 定 单个 的 目标 值 
2000 全 设置 持续 时 间 


) > 
}); 


为 了 实现 这 个 动画 ， 使 用 each() 来 毅 历 包装 集中 的 所 有 元 素 ， 以 便 为 每 个 匹配 元 素 单 独 应 
用 动画 @@,。 这 非常 重要 ， 因 为 需要 为 每 个 元 素 指 定 的 属性 值 是 基于 该 元 素 的 特有 尺寸 的 @。 如果 
我 们 总 是 知道 对 单个 元 素 应 用 动画 (正如 使 用 id 选择 器 一 样 ) 或 者 对 每 个 元 素 应 用 完全 相同 的 
一 组 值 ， 那 就 无 需 使 用 each () 而 直接 对 包装 集 应 用 动画 。 

在 迭代 子 数 中 ,animate() 方 法 被 应 用 到 (通过 this 指向 的 ) 元 素 上 ,同时 wiath 和 height 
样式 属性 值 设 置 为 元 素 初 始 尺 寸 的 两 倍 大 小 。 结果 在 两 秒 钟 的 时 间 内 (将 guration 参数 值 指定 
为 2000 人 @ )， 多 个 包装 元 素 (或 者 单个 元 素 ) 将 会 从 其 原始 尺寸 增长 到 该 尺寸 的 两 倍 大 小 。 

现在 ， 来 尝试 一 些 更 加 华丽 的 特效 。 


























5.3.2” 自 定义 掉 落 动画 


假设 我 们 要 以 引 人 注 意 的 动画 方式 从 显示 融 上 删除 元 系 , 这 可 能 是 因为 要 传达 给 用 户 的 信息 
非常 重要 : 删除 的 项 一 去 不 返 ， 因 此 应 该 对 要 删除 的 项 确 以 无 误 。 我 们 用 动画 表达 这 个 意思 ,元 
素 从 页 面 上 掉 落 下 来 ， 同 时 逐渐 从 显示 硕 上 消失 。 

如 果 和 仔细 想 一 下 就 能 够 知道 ， 可 以 通过 调整 元 素 的 top 位 置 使 其 癌 页 面 底部 移动 来 模拟 掉 
洲 过 程 ， 同 时 通过 调整 opacity 使 元 素 看 起 来 好 像 消失 了 一 样 。 最 后 ， 当 所 有 的 事情 都 完成 了 ， 
就 可 以 从 显示 带 上 删除 元 系 ( 类 似 于 hige() 的 动画 方法 )。 

我 们 可 以 使 用 代码 清单 5-5 中 的 代码 来 实现 这 个 挥 落 特效 。 


代码 清单 5-5” 自 定义 掉 落 动画 





























$s('.animateMe') .each (function()t 
Sens 使 元 素 脱离 静态 流 布 局 
COO( DOSlt1ION' ; "relatliye") -9 
.animate ( 
{ 
opacity: 0, 
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api Stwindow) .Height(t) = StEhis) helighety = © 计算 下 降 距 离 
S (this) .position().top 
J 
'slow', 从 显示 器 上 删除 元 素 
function(){ s(this) .hide(); } 


J 
}); 


相 比 前 一 个 自 定义 特效 , 这 里 多 了 一 些 处 理 步骤 。 再 次 过 历 元 素 集合 ,调整 元 素 的 位 置 和 不 
透明 度 。 但 是 为 了 相对 于 初始 位 置 来 调整 元 素 的 top 值 , 首先 需要 改变 它 的 CSS position 样式 
属性 值 为 relative@, 

然后 ， 为 动画 过 程 指定 目标 opacity 值 为 0 和 计算 后 的 top 值 。 我 们 不 希望 元 素 在 页 面 
上 回 下 移动 时 超出 窗 体 底部 的 范围 ， 因 为 这 会 导致 出 现 以 前 不 曾 出 现 过 的 滚动 条 ， 很 可 能 会 分 
散 用 户 的 注意 力 。 我 们 不 和 硕 望 用 户 将 注意 力 从 动画 上 移 开 一 一 吸引 用 户 的 注意 力 是 当初 采用 动 
画 的 原因 ! 因此 我 们 使 用 元 素 的 高 度 、 垂 直 位 置 以 及 窗 体 的 高 度 来 计算 出 元 素 应 该 在 页 面 中 瓜 
落 的 距离 @”， 

当 动 画 完 成 时 , 我 们 想 从 显示 带 上 删除 元 素 ，, 因此 指定 了 一 个 回调 函数 合并 在 这 个 回调 函数 
中 为 元 素 〈 以 国 数 上 下 文 的 形式 存在 ) 应 用 hiqe() 方 法 的 非 动画 版 本 。 












































注意 D0000000000000000000000000000000000000 
DDO000000000U000U0UUU opacityU UUU riaeDUD oOU00 
DUDOUDUDUOUOUOUOUUUOUUUUUUUUD 





现在 接 者 尝试 更 多 “让 它 消 失 ” 的 特效 类 型 吧 。 
5.3.3” 目 定义 消散 动画 


假设 我 们 想 要 一 种 特效 , 让 元 素 像 一 股 烟 一 样 消散 在 晴空 中 而 不 是 从 页 面 上 掉 落 下 来 。 为 了 
通过 动画 来 实现 这 个 特效 , 我 们 可 以 组 合 使 用 比例 缩放 特效 和 不 透明 度 特效 , 在 使 元 素 边 放大 边 
淡出 。 在 这 个 特效 中 需要 处 理 的 一 个 问题 是 ， 如 果 固 定 元 素 的 左上 角 并 让 元 素 在 原 地 增 大 ,那么 
这 个 消散 过 程 就 眶 不 过 用 户 的 眼睛 。 我 们 想 让 元 素 的 中 心 在 增 大 过 程 中 原 地 不 动 , 因此 作为 动画 
的 一 部 分 除了 调整 元 素 的 大 小 外 还 需要 调整 元 系 的 位 置 。 

消散 特效 的 代码 如 代码 清单 5-6 所 示 。 


代码 清单 5-6 ” 自 定 义 消散 动 面 


Ss('.animateMe') .each (function()t 

















var position = S(this) .position(); 





Gd 注意 ， 这 个 计算 过 程 只 有 在 元 素 的 offsetParent () 为 document .body 并 且 页 面 没 有 出 现 滚动 条 的 情况 下 才 
正确 。 
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s (this -9 使 元 素 脱离 静态 流 布局 
.Css({position: 'absolute', 
top: position.top, 
left: position.left}) 2 调整 元 素 的 大 小 、 位 置 和 不 透明 度 
.animatel( 


{ 
opacity: 'hide', 
width: S(this) .width() * 5, 
height: S(this) .height() * 5, 


top: position.top - (S(this) .height() * 5 / 2)， 
left: position.left - (S(this) .width() * 5 / 2) 
}, 
'normal'); 


1 
在 这 个 动画 中 ,我们 将 不 透明 度 减 少 到 0 的 同时 把 元 系 的 尺寸 增 大 为 其 原始 尺寸 的 5 售 ，,， 并 
根据 新 尺寸 的 一 半 大 小 来 调整 元 素 的 位 置 ， 结 果 使 得 元 素 的 中 心 保持 原 地 不 动 @"。 在 目标 元 素 
增 大 的 过 程 中 ， 我 们 不 而 望 动画 元 素 周 于 的 元 素 和 被 回 外 挤 ， 因 此 通过 修改 目标 元 素 的 定位 为 
absolute 并 且 显 式 地 设置 其 位 置 坐标 铺 ， 从 而 把 动画 元 素 从 流 布 局 中 完全 提取 出 来 。 
因为 我 们 已 经 指定 opacity 值 为 aidae， 因 此 一 旦 动画 结束 元 素 就 会 自动 隐藏 ( 从 显示 器 中 5 
删除 )。 
可 以 通过 加 载 页 面 chapter5/custom.effects.html 来 观察 这 3 种 目 定 义 特 效 ， 如 图 5-4 所 示 。 






































人 人 日 Custom Effects Demo OO 
Rg 其， © nttp://localhost/jqia2 /chapterS /custom.effects.html ~ 


Custom Effects Demo 


Scale | 





Restore | 








图 5-4 ”可 以 通过 本 示例 页 面 提供 的 按钮 来 观察 已 开发 的 日 定义 特效 Scale( 放大 )、Drop 
(降落 ) 和 Puff (消散 ) 的 运行 


为 了 显示 截图 我 们 有 意 使 浏览 带 窗 口 保持 最 小 尺寸 , 但 是 为 了 正确 地 观察 特效 的 行为 , 在 运 
行 本 页 面 时 你 可 能 想 让 窗口 更 大 一 点 。 虽然 我 们 很 想 向 你 展示 这 些 特效 的 行为 , 但 是 帘 图 有 明显 
的 局 限 性 。 不 过 图 5-5 显示 了 进行 中 的 消散 特效 。 

















OQ 严格 地 说 这 个 计算 不 正确 ， 你 可 以 仔细 观察 实验 室 页 面 中 Puff 的 动画 过 程 ， 会 发 现 元 素 的 中 心 并 不 是 呆 在 原 地 。 
正确 的 代码 应 该 是 position.top - ($(this).height() * 4 / 2)。 
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QOO Custom Effects Demo S| 
FS Wy © http://localhost/jqia2 /chapterS /custom.effects.html » Qr Coogl 





图 5-5 ”Pu 人 ff 特效 在 减少 不 透明 度 的 同时 扩展 和 移动 图 片 


接 下 来 你 可 以 尝试 本 页 面 中 的 各 种 不 同 的 特效 ， 并 观察 它们 的 行为 。 
目前 为 止 已 研究 的 所 有 示例 都 只 使 用 了 一 个 动画 方法 ,下 面 来 探讨 当 使 用 一 个 以 上 的 动画 方 
法 时 它们 是 如 何 工 作 的 。 


5.4 ”动画 和 队列 


我 们 已 经 看 到 了 如 何 使 用 单个 动画 方法 为 元 素 的 多 个 属性 应 用 动画 , 但 是 还 没有 真正 研究 过 
同时 调用 多 个 动画 方法 时 这 些 动画 的 行为 。 
本 市 将 探讨 动画 一 起 出 现时 的 行为 。 


5.4.1 并 发 的 动画 
如 琳 执 行 如 下 代码 ， 你 觉得 会 发 生 什么 呢 ? 


$s('#testSubject') .animate({left:'+=256'},'slow'); 
$('#testSubject') .animate({top: '+=256'},'slow'); 


我 们 知道 animate() 方 法 创建 的 动画 在 页 面 运 行 时 不 会 阻塞 代码 的 执行 ， 其 他 的 动画 方法 
也 是 一 样 。 可 以 通过 如 下 的 代码 块 来 证 明 : 
say 二) 


$s('#testSubject') .animate({left:'+=256'},'slow'); 
say (2)> 


回想 下 在 第 4 草 介 绍 的 say () 函数 , 它 通 过 在 页 面 的 “控制 人 台 ” 上 输出 信息 来 避免 弹出 警告 
对 话 框 〈 这 肯定 会 破坏 我 们 对 实验 示例 的 观察 )。 

如 条 执行 这 段 代 码 ， 我 们 会 发 现 “1” 和 “2” 这 两 个 消息 没有 等 到 动画 完成 就 立即 被 一 前 一 
后 地 输出 了 。 
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那么 , 如 果 运 行 调用 两 个 动画 方法 的 代码 时 , 会 发 生 什 么 结果 呢 ? 由 于 第 一 个 方法 不 会 阻塞 
第 二 个 ， 因 此 显而易见 这 两 个 动画 会 同时 (或 者 之 间 相 差 几 毫秒 ) 发 生 , 应 用 到 测试 对 象 上 的 特 
效 将 会 是 这 两 个 特效 的 组 合 。 在 这 个 示例 中 ， 由 于 一 个 特效 是 调整 1eft 样式 属性 ， 另 一 个 是 调 
整 top 样式 属性 ， 因 此 预期 结果 是 测试 对 象 沿 着 一 条 蚁 旺 的 对 角 线 运行 。 

下 面 来 测试 一 下 。 在 文件 chapter5/revolutions.html 中 我 们 已 经 做 了 一 个 实验 ， 其 中 创建 了 两 
个 图 片 (其 中 只 有 一 个 是 可 以 应 用 动画 的 )， 一 个 用 来 开始 实验 的 按钮 和 一 个 用 于 显示 say () 矣 
数 输出 的 “控制 台 ”。 图 5-6 显示 了 页 面 的 初始 状态 。 

















OO Keplers dilemma 区 
TERTIAE ER 
IC 2 |© http:/ /localhost/jqia2/chapterS /revolutions.html el AQ Google 


Start 





2 


图 5-6 页 面 的 初始 状态 ， 我 们 将 在 该 页 面 上 观察 多 个 并 发 的 动画 


Start 按钮 的 实现 逻辑 如 代码 清单 5-7 所 示 。 


代码 清单 5-7 多 个 并 发 动画 的 实现 逻辑 

Ss('#¥startButton') .click (function()t 
Say (lL)> 
$s("img[lalt='moon']") .animate({left:'+=256'},2500);} 
Say (2)7 
$s ("img[lalt='moon']") .animate({top: '+=256'},2500); 
Say (23)} 
$s("img[lalt='moon']") .animate({left:'-=256'},2500); 
say (4); 
$s("img[lalt='moon']").animate({top:'-=256'},2500); 
Say (S13 

sy 


在 按钮 的 单 击 处 理 带 中 ， 我 们 一 个 接 一 个 地 调用 了 4 个 动画 ， 其 中 还 穿插 了 调用 了 say ()， 
用 于 指示 什么 时 候 触发 动画 的 调用 。 
打开 页 面 ， 然 后 单 击 Start 按钮 。 
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不 出 所 料 ， 控 制 合 消息 “1” 到 “5S5” 会 立即 在 控制 侣 上 显示 出 来 ， 如 图 5-7 所 示 ， 每 个 调用 
相对 于 前 一 个 只 有 儿 有 曝 秒 的 间隔 。 





LU Ka) LU 
WU Lg 
ew mm 
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4:38.460 -5 








图 5-7 控制 台 消 居 接 连 不 断 地 显示 出 来 ， 说 明 在 完成 前 没有 任何 动画 方法 被 阻 突 


但 是 动画 效果 如 何 呢 ? 如 果 观 察 代 三 清 单 5-7 中 的 代码 就 可 以 看 到 ， 有 两 个 动画 改变 了 top 
属性 ， 另 外 两 个 动画 改变 了 left 属性 。 事 实 上， 这 些 动画 对 每 个 属性 的 操作 正好 相反 。 那 么 结 
末 如 何 呢 ? 也 许 这 些 动画 互相 取消 ， 使 得 Moon( 测试 对 象 ) 保持 原 地 不 动 ? 

不 。 一旦 单 击 Start， 我 们 就 会 看 到 所 有 动画 一 个 接 一 个 地 依次 发 生 ， 因 此 Moon 环绕 Earth 
完成 了 一 次 完整 的 有 序 的 转 劲 (尽管 是 在 一 个 非常 不 目 然 的 矩形 轨 着 上 运行 ,这 应 该 会 让 开 普 
勒 (Kepler ) 感到 朋 江 )。 

怎么 回 事 ?我 们 已 经 通过 控制 台 消 息 来 证 明了 动画 不 会 阻塞 , 但 是 它们 执行 的 顺 友 就 像 被 阻 
塞 了 一 样 〈 至 少 两 个 动画 相互 之 间 是 这 样 )。 

真正 发 生 的 是 ，jQuery 在 内 部 将 动画 放 入 队列 并 按 顺 序 执行 它们 。 

刷新 Kepler’s Dilemma 页 面 以 便 清 空 控 制 台 ， 并 连续 单 击 Start 按钮 三 次 。( 在 两 次 单 击 之 间 
停顿 足够 长 的 时 间 以 防止 双击 。) 你 将 会 看 到 15 条 消息 是 如 何 被 立即 输出 到 控制 台 的 , 这 表明 单 
击 处 理 器 已 经 执行 了 三 次 ， 然 后 在 等 待 Moon 绕 Earth 运行 3 次 的 时 候 你 可 以 放松 一 下 。 

jQuery 将 这 12 个 动画 进行 排队 并 依次 执行 。jQuery 为 此 在 每 个 动画 元 素 上 维持 了 一 个 名 为 
fx 的 队列 。( 在 下 一 闻 中 将 会 详细 介绍 队列 拥有 名 字 的 重要 性 。) 

这 种 方式 的 动画 队列 意味 着 鱼 和 能 掌 可 以 兼 得 。 我 们 可 以 使 用 单个 animate () 方 法 指定 所 
有 的 动画 属性 来 同时 操作 多 个 属性 ， 也 可 以 简单 地 按 顺 序 调 用 动画 来 连续 执行 任何 想 要 的 动画 。 

更 棱 的 是 ，jQuery 允许 我 们 创建 自己 的 执行 队列 ,不 仅仅 为 动画 目的 , 还 可 以 为 任何 其 他 目 
的 。 下 面 来 继续 学 习 这 方面 的 内 容 。 


5.4.2 ”将 函数 排队 执行 
函数 队列 的 一 个 明显 用 途 是 将 动画 进行 排队 以 便 连 续 执行 。 但 是 这 样 做 是 否 真 正 有 利 ? 毕 
竟 ， 动 画 方法 允许 指定 完成 时 回调 ， 那 为 什么 不 在 前 一 个 动画 的 回调 中 执行 下 一 个 动画 呢 ? 


1. 添加 函数 到 队列 
回顾 一 下 代码 清单 5-7 中 的 代码 〈 为 了 清晰 起 见 去 掉 了 say () 调 用 代码 ): 












































3 


$s("img[lalt='moon']") .animate({left:'+=256'},2500);， 
$s ("img[lalt='moon']") .animate({top: '+=256'},2500); 
$s("img[lalt='moon']") .animate({left:'-=256'},2500);， 
$s("imglalt='moon']").animate({top: '-=256'},2500);，; 
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将 此 代码 与 不 使 用 函数 队列 ， 使 用 完成 时 回调 的 等 效 代 码 作 对 比 : 
S$( ' 井 StartButton') .click (function()t 
Ss("imgl[alt='moon']") .animate({left:'+=256'},2500, function()t 
Ss("img[alt='moon']") .animate({top: '+=256'},2500,function()t 
Ss("imgl[alt='moon']") .animate({left:'-=256'},2500,function()t 
$s ("img[alt='moon']") .animate({top: '-=256'},2500)， 








这 段 代 码 的 回调 变 体 不 是 太 复 杂 ， 而 且 原 始 代 码 也 很 容易 阅读 ( 首先 是 编写 更 简单 )。 如 果 
回调 函数 的 主体 非常 复杂 时 …… 可 以 很 容易 看 出 ， 对 动画 进行 排队 使 得 代码 的 复杂 度 降 低 了 。 

如 果 想 使 日 己 的 函数 拥有 相同 的 功能 该 怎么 办 呢 ? jQuery 并 不 音 首 它 的 队列 。 我 们 可 以 将 
希望 按 顺 序 执行 的 任何 函数 进行 排队 来 创建 自己 的 队列 。 

可 以 在 任何 元 系 上 创建 队列 ， 不 同 的 队列 通过 各 目 唯 一 的 名 称 来 识别 《除了 fx 被 用 于 特效 
队列 以 外 ) 将 函数 实例 添加 到 队列 的 方法 是 queue () 〈 并 不 奇怪 )， 该 方法 有 以 下 3 种 变 体 。 














方法 语法 : queue 





queue (name) 

cueue (name, function) 

queue (name, queue) 

一 种 形式 根据 传 入 的 名 称 查找 建立 在 匹配 集中 第 一 个 元 素 上 的 任意 队列 ， 并 以 函数 数组 的 

形式 返回 

第 二 种 形式 将 传 入 的 函数 添加 到 匹配 集中 所 有 元 素 的 命名 队列 的 末尾 。 如 果 在 某 个 元 素 上 不 

存在 这 种 命名 队列 ， 则 创建 一 个 队列 

最 后 一 种 形式 把 匹配 元 素 上 现 有 的 任意 队列 替换 为 传 入 的 队列 

参数 

name (字符 串 ) 需要 获取 的 、 向 其 中 添加 的 或 者 蔡 换 的 队列 名 称 。 如 果 省 略 ， 则 默 
认为 特效 队列 名 称 fx 

En 而 ( 函数 ) 需要 添加 到 队列 结尾 的 函数 。 当 调用 此 函数 时 ， 函 数 上 下 文 (this ) 
被 设置 为 用 于 创 WA ] 的 DOM 元 素 

queue (数组 ) 一 个 函数 数组 ， 用 于 替换 命名 队列 中 的 现 有 有 函数 





queue () 方 法 篆 用 于 诡 加 函数 到 命名 队列 的 末尾 ， 但 是 也 可 以 用 于 获取 队列 中 任意 的 现 有 天 
数 或 者 析 换 队列 中 的 函数 列表 。 注 意向 queue () 传 递 遇 数 数组 的 形式 不 能 用 于 将 多 个 本 效 浴 加 到 
队列 的 未 尾 ， 因 为 任何 现 有 的 队列 表 数 都 将 被 删除 。( 为 了 这 加 多 个 咀 数 到 队列 中 ， 我 们 需要 获 
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取 函 数 数 组 ， 合 并 新 的 函数 ， 然 后 将 修改 后 的 数组 深 加 到 队列 中 。) 
2. 执行 队列 中 的 函数 
好 ,现在 可 以 添加 函数 到 队列 中 来 执行 。 这 并 不 是 很 有 用 ， 除 非 能 够 以 某 种 方法 使 函数 的 执 
真正 发 生 。 下 面 来 看 下 aeaueue ( ) 方 法 。 











方法 语法 : dequeue 


dequeue (name) 


删除 匹配 集中 每 个 元 素 的 命名 队列 中 的 第 荡 数 并 为 每 个 元 素 执 行 此 函数 

参数 

name (字符 串 ) 队列 的 名 称 ， 该 队列 中 的 第 一 个 函数 将 会 被 删除 并 执行 。 如 果 省 略 ， 
则 默认 为 特效 队列 名 称 fx 

返回 值 

包装 集 


当 调 用 dequeue () 时 ， 会 执行 包装 集中 每 个 元 素 的 命名 队列 中 的 第 一 个 国 数 ， 并 将 当前 元 
素 设 置 为 调用 函数 的 上 下 文 (this )。 
下 面 考 虑 代码 清单 5-8 中 的 代码 。 


代码 清单 5-8 在 多 个 元 素 上 使 另 数 入 队 和 出 队 











<html> 
<head> 
<link rel="stylesheet" type="text/css" href="../styles/core.css" /> 
<script type="text/javascript" src="../scripts/jquery-1.4.js"></script> 


<script type="text/javascript" src="console.js"></script> 
<script type="text/javascript"> 


Ss(function() { 
S$S('img') .queue('chain', 
function(){ say('First: ' + S$(this) .attr('alt')); }); 
S$S('img') .queue('chain', 
function(){ say('Second: ' + S$S(this) .attr('alt')); }); 
S$S('img') .queue('chain', a ey 
en Ad a de 
Ss('img') .queue('chain', 
function(){ say('Fourth: ' + S$(this) .attr('alt')); }); 
Ss('button') .click(function()t 
S$S('img') .dequeue('chain'); 
3 每 次 单 击 使 一 个 函数 出 队 
}); 
</script> 
</head> 
<body> 
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<QIV> 
<img src="earth.png" alt="Earth"/> 
<img src="moon.png" alt="Moon'"/> 
</div> 


<button type="button" class="green90x24">Dequeue</button> 
<div id="console"></div> 


</body> 
</htmil> 


本 例 中 ( 可 以 在 文件 chapter5/queue.html 中 找到 ), 我 们 分 别 在 两 张 图 片上 创建 了 名 为 chain 
的 队列 。 在 每 个 队列 中 放置 了 4 个 函数 @@, 通过 序号 来 找 出 每 个 函数 并 且 输 出 任何 作为 函数 上 下 
文 的 DOM 元 素 的 alt 属性 ,通过 这 种 方式 可 以 知道 哪个 函数 正在 被 执行 以 及 该 函数 来 自 哪 个 元 
素 的 队列 。 

单 击 Dequeue 按钮 ， 按 钮 的 单 击 处 理 器 侈 就 会 执行 一 次 dequeue () 方 法 。 

下 面 再 单 击 按钮 一 次 ， 观 察 控 制 台 的 消息 ， 如 图 5-8 所 示 。 











@N0o0 Queue/Dequeue | 
eg EE |@ http://localhost/jqia2/chapterS /queue.htm!  。 攻 





Dequeue | 
At 16:28:25.468 - First: Earth 
AL 16:28:25.469 - First: Moon 





图 5-8 单 击 Dequeue 按 钮 ,触发 队列 中 的 单个 函数 实例 并 在 每 个 创建 队列 的 图 片上 的 


行 一 次 
可 以 看 到 ,添加 到 图 片 chain 队列 的 第 一 个 也 数 被 触发 了 两 次 : 第 一 次 为 Earth 图片， 第 二 
次 为 Moon 图 片 。 


多 次 单 击 按钮 会 导致 每 次 从 队列 中 删除 一 个 随后 的 函数 , 并 且 执 行 被 删除 的 函数 下 到 队列 为 
空 ; 在 这 之 后 ， 调 用 dequeue () 不 会 有 任何 效果 。 

在 本 例 中 ， 冰 数 的 出 队 是 手动 控制 的 一 一 需要 单 击 按钮 4 次 《导致 调用 dequeue() 方 法 4 
次 ) 才能 使 所 有 4 个 函数 都 被 执行 。 我 们 可 能 经 浓 硕 望 执 行 整个 集合 中 的 所 有 队列 丽 数 。 对 于 这 
种 情况 , 常用 的 做 法 是 在 队列 函数 内 部 调用 aequeue () 方 法 以 便 触 发 下 一 个 队列 函数 的 执行 ( 换 
句 话说 ， 创 建 一 条 到 下 一 个 队列 函数 的 链接 )。 

考虑 对 代码 清单 5-8 中 的 代码 做 如 下 改动 : 








图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 





152 第 5 章 ”用 动画 和 特效 装扮 页 面 


S$S('jmg') .queue('chain', 
function()t 
say ('First: ' + S$S(this) .attr('alt')); 
$s (this) .dequeue('chain'); 
1. 
$('img') .queue('chain', 
function()t 
say('Second: ' + S$(this) .attr('alt')).; 
$s (this) .dequeue('chain'); 
la 
S$S('jmg') .queue('chain', 
function()t 
say ('Third: ' + $(this) .attr('alt')); 
S (this) .dequeue('chain'); 
下 


Si"imo' .deuel "chain™, 
function()t 
say('Fourth: ' + $(this) .attr('alt')); 


$s (this) .dequeue('chain'); 
J 


我 们 i ee ep 2.html 中 完成 了 这 个 改动 。 在 浏览 硕 中 打开 这 个 页 面 ， 
然后 | Dequeue 按钮 。 注 意 观 察 现 在 单个 单 击 是 如 何 执行 整个 队列 函数 链 的 。 
. 清除 没有 执行 的 Me 函数 
ww 中 删除 那些 没有 执行 的 队列 函数 ， 那 么 可 以 使 用 clearoueue () 方 法 。 





DE 夫 1 本 二， clearQueue 


clearQueue (name ) 


从 命名 队列 中 删除 所 有 未 执行 的 函数 


参数 

name (字符 事 ) 队列 的 名 称 ， 该 队列 中 未 执行 的 函数 将 被 删除 。 如 果 省 略 ， 则 默认 为 
特效 队列 名 称 fx 

返回 值 

包装 集 





和 stop () 动 男方 法 类 似 ,clearoueue () 可 以 在 一 般 的 队列 晒 数 上 使 用 而 不 是 仅仅 用 于 动画 
4. 延迟 队列 函数 
为 一 个 适用 于 队列 的 操作 是 添加 队列 函数 执行 之 则 的 延 运 。delay () 方 法 能 够 做 到 这 


4 O 
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方法 语法 : delay 


delay (duration, name) 


为 命名 队列 中 所 有 未 执行 的 函数 添加 延迟 " 


参数 

duration ( 数字 | 字符 囊 ) 延 迟 时 间 , 可 以 是 若干 毫秒 , 也 可 以 是 字符 串 fast 或 者 slow 
两 者 之 一 ， 分 别 表示 200 毫秒 和 600 毫秒 

name (字符 串 ) 队列 的 名 称 ， 该 队列 中 没有 执行 的 函数 将 被 删除 。 如 果 省 略 ， 则 
默认 为 特效 队列 名 称 fx 

返回 值 

包装 集 


在 继续 学 习 之 前 还 有 一 件 有 关 队 列 函 数 的 事情 需要 讨论 …… 
5.4.3 ”插入 函数 到 特效 队列 


之 前 曾 提 到 ,jQuery 为 了 实现 动画 在 内 部 使 用 一 个 名 为 fx 的 队列 来 对 必要 的 函数 进行 排队 。 
如 有 果 想 癌 这 个 队列 添加 目 定 义 函 数 , 以 便 在 一 系列 的 特效 队列 中 插入 一 些 行为 , 该 怎么 办 呢 ? 现 
在 知道 了 有 关 排 队 的 方法 ， 我 们 就 可 以 做 到 了 1 

回想 下 前 面 代码 清单 5-7 的 例子 ,通过 4 个 动画 使 Moon 绕 Earth 转动 。 想 象 一 下 ,要 在 第 2 
个 动画 ( 使 图 片 向 下 移动 的 动画 ) 之 后 将 Moon 图 片 的 背景 色 变 为 黑色 。 如 果 只 是 在 第 2 个 和 第 
3 个 动画 之 间 调 用 css () 方 法 ， 如 下 所 示 : 























$s("img[lalt='moon']") .animate({left:'+=256'},2500);， 

$s ("img[lalt='moon']") .animate({top: '+=256'},2500); 
Ss("jmglalt='moon']").css({'backgroundColor': 'black'}); 
$s ("img[lalt='moon']") .animate({left:'-=256'},2500);， 

$s ("imglalt='moon']").animate({top: '-=256'},2500);，; 





效 朱 将 非常 不 理想 ， 因 为 这 将 会 立即 改变 育 景 色 ， 甚 至 可 能 在 第 1 个 动画 开始 之 前 。 
相反 ,考虑 如 下 代码 : 


$s("img[lalt='moon']") .animate({left:'+=256'},2500);} 
$s ("img[lalt='moon']") .animate({top: '+=256'},2500); 
Ss("jmgl[lalt='moon']") .queue('fx', 


function()t 
S(this).css({'backgroundColor': 'black'}); 
$s (this) .dequeue('fx'):; 
} 
1 
Ss("jmglalt='moon']") .animate({left:'-=256'},2500);，} 
$s("imglalt='moon']").animate({top: '-=256'},2500);，; 


QD 这 个 说 法 不 正确 ，gdelay 只 能 延迟 队列 中 下 一 个 函数 的 执行 ， 而 不 会 延迟 所 有 未 执行 的 困 数 。 例 如 


s ("img") .slideUp (300) .delay (1000) .fadeIn (500) .slideUp (500);, 其 中 最 后 一 个 slideUp 会 在 
fadeIn 完成 之 后 立即 执行 。 
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这 里 使 用 queue () 方 法 将 css () 方 法 的 调用 放 在 fx 队列 的 一 个 函数 中 。( 可 以 省 略 队列 的 
名 称 ， 因为 fx 是 默认 的 , 但 是 为 了 清晰 起 见 显 式 地 声明 了 它 。) 这 把 改变 颜色 的 孔 数 置 于 特效 队 
列 中 作为 函数 链 的 一 部 分 ， 随 痢 动 画 的 进行 ， 在 第 2 个 和 第 3 个 动画 之 间 将 调用 该 函数 。 

注意 ， 我 们 在 调用 css () 方 法 之 后 ， 又 调用 了 fx 队列 的 dequeue() 方 法 。 为 了 保持 动画 队 
列 的 连续 性 ， 这 是 绝对 必要 的 。 此 时 如 果 不 调用 dequeue () 会 导致 动画 停顿 下 来 ， 因 为 没有 引 
发 链 中 的 下 一 个 函数 执行 的 因素 。 未 执行 的 动画 只 是 呆 在 特效 队列 中 ,直到 某 件 事情 导致 一 个 出 
了 以 操作 才 会 引发 函数 执行 ， 也 可 以 缉 载 页 面 ， 这 将 丢弃 所 有 的 东西 。 

如 果 你 想 杀 眼看 到 运行 过 程 ， 可 以 在 浏览 各 中 载 入 页 面 文件 chapter5/revolutions.2.html， 然 
后 单 击 页 面 上 的 按钮 。 

当 我 们 想 要 连续 地 执行 函数 时 ,函数 队列 就 派 上 用 场 了 , 这样 就 不 用 在 异步 的 回调 中 极 套 大 
量 复杂 的 国 数 ; 你 可 能 会 联想 到 ， 上 男 数 队列 在 Ajax 中 也 有 用 武之 地 。 

不 过 那 就 是 另 一 草 的 内 容 了 。 


5.5 ”小结 


本 半 不 仪 介绍 了 和 耻 接 使 用 的 jQuery 动画 特效 ,还 介绍 了 人 允许 创建 日 定义 动画 的 animate () 方 法 。 

当 不 带 参数 调用 show () 和 hiae () 方 法 时 , 会 立即 从 显示 器 上 显示 或 隐藏 元 素 , 没有 任何 动 
画 。 可 以 通过 向 这 些 方法 传 入 控制 动画 速度 的 参数 以 及 提供 一 个 可 选 的 、 在 动画 完成 时 执行 的 回 
调 来 执行 显示 或 隐藏 元 素 的 动画 版 本 。toggle () 方 法 用 来 切换 元 素 的 隐藏 或 显示 状态 。 

另外 一 组 包装 需 方 法 (fadqeout() 和 fadeIn() ) 通过 调整 元 素 的 不 透明 度 来 隐藏 或 显示 元 
素 ， 从 而 在 显示 硕 上 删除 或 显示 元 素 。 第 三 种 方法 (fadqeTo() ) 以 动画 方式 改变 包 净 元 素 的 不 
透明 度 ， 但 不 会 从 显示 器 上 删除 元 素 ”。 

最 后 一 组 内 置 的 3 个 特效 动画 通过 调整 包 疙 元 条 的 和 王 耻 高 度 来 隐藏 或 显示 它们 : slideUp ()、 
slideDown () MR slideToggle()。 

jQuery 提供 了 animate() 方 法 以 便 我 们 创建 自 定义 动画 。 可 以 使 用 这 个 方法 对 任何 接受 数 
字 值 的 CSS 样式 属性 应 用 动画 ， 最 常用 的 是 元 系 的 不 透明 度 、 位 置 和 矿 才 。 我 们 研究 编写 了 一 
些 自 定 义 动画 ， 用 于 从 页 面 上 以 新 络 、 流 行 的 方式 删除 元 素 。 

我 们 也 了 解 到 jQuery 如 何 将 动画 排队 以 便 串 行 执行 ， 以 及 如 何 使 用 jQuery 的 队列 方法 向 特 
效 队 列 或 者 自 定 义 的 队列 中 添加 目 定 义 函数 。 

在 探讨 如 何 编写 目 定 义 动画 时 ， 我 们 为 这 些 目 定义 动画 特效 编写 了 页 面 中 内 联 的 JavaScript 
代码 。 一 个 更 加 常见 和 有 用 的 方法 是 将 日 定义 动画 打包 成 目 定 义 的 jQuery 方法 。 在 第 7 草 将 会 
学 习 如 何 做 到 这 一 点 , 我 们 茧 励 你 在 阅读 完 第 7 章 后 重 温 这 些 特效 。 请 重新 封装 已 在 本 章 中 开发 
的 目 定 义 特 效 以 及 任何 所 能 想到 的 特效 ， 这 将 会 是 个 很 棒 的 跟 进 练习 。 

但 在 编写 自己 的 jQuery 扩展 之 前 ， 先 来 看 一 些 蜗 级 的 jQuery 函数 和 标志 ， 它 们 对 于 一 般 的 
任务 和 扩展 功能 都 非常 有 用 。 































































































Jb 不 从 显示 顺 上 删除 元 素 ， 指 的 是 不 将 元 素 的 display 样式 属性 设置 为 none。 
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DOM 无关 的 jQuery 实用 函数 


本 章 内 容 

D jQuery 的 浏览 需 支 持 信息 
口 使 用 jQuery 与 其 他 的 库 
口 操作 数组 的 函数 

口 扩展 与 合并 对 象 

口 动态 加 载 新 的 脚本 





目前 为 止 ,我 们 已 经 用 了 几 章 来 介绍 jQuery 方法 ,这 些 方法 作用 于 通过 $ () 困 数 包 闻 的 DOM 
元 素 集 合 。 你 可 能 还 记得 ， 早 在 第 1 草 我 们 就 介绍 了 实用 函数 的 概念 一 一 定义 在 jQuery/$ 命 名 
空间 下 不 操作 包 竣 集 的 图 数 。 这 些 冰 数 可 以 看 作 是 定义 在 $ 实 例 而 不 是 window 实例 上 的 顶级 也 
数 ， 从 而 将 它们 排除 在 全 局 命名 空间 之 外 。 
一 般 来 说 ， 这 些 实用 函数 要 么 操作 除 DOM 元 系 ( 毕竟 ,这 是 包装 带 方 法 的 管辖 范围 ) 以 外 
的 Java Script 对 象 ， 要 么 执行 一 些 对 象 无 天 的 操作 (例如 Ajax 请 求 )。 
除了 函数 ，jQuery 还 提供 了 一 些 定义 在 jQuery/$ 命 名 空间 中 的 有 用 标志 。 
你 可 能 会 厨 怪 为 什么 要 等 到 这 一 章 才 介绍 这 些 函 数 和 标志 。 有 如 下 两 个 理由 。 
口 我 们 想 引 导 你 从 jQuery 包装 天 方法 的 角度 来 思考 问题 ， 而 不 是 依靠 底层 的 操作 ， 虽 然 底 
层 操作 你 可 能 更 加 熟悉 ， 但 不 如 使 用 jQuery 包 闭 希 编写 代码 来 得 高 效 和 简单 。 
口 因为 包装 天 方法 溯 盖 了 非常 多 的 方法 , 它们 可 以 操作 页 面 上 DOM 元 素 , 所 以 这 些 抵 层 也 
数 在 用 来 编写 这 些 方法 本 号 时 最 为 有 用 (以 及 其 他 扩展 )， 而 不 是 用 在 编写 页 面 级 别 的 代 
但 里 。( 我 们 将 在 第 7 草 学 习 如 何 编写 目 己 的 jQuery 插件 。) 
在 本 章 中 ， 我 们 终于 将 正式 地 介绍 大 部 分 $ 级 别 的 实用 因数 以 及 一 些 有 用 的 标志 。 涉 及 Ajax 
的 实用 冰 数 将 会 推 到 到 第 8 草 探 讨 ， 其 中 会 专门 介绍 jQuery 的 Ajax 功能 。 
下 面 先 从 提 到 的 那些 标志 开始 。 


6.1 使 用 jQuery 标志 
jQuery 是 通过 定义 在 $ 上 的 属性 来 为 页 面 开发 者 和 插件 开发 者 提供 一 些 信息 ， 而 不 是 通过 广 
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法 或 者 也 数 提供 的 。 其 中 的 很 多 标志 用 来 检测 当前 浏览 絮 的 功能 ,而 其 他 标志 则 用 来 帮助 我 们 在 
页 面 全 局 级 别 的 层次 上 控制 jQuery 的 行为 。 
公共 用 途 的 jQuery 标志 如 下 : 
口 $ .fx.off 一 一 启用 或 者 禁用 特效 ; 
所 支持 特征 的 详细 信息 ; 
DD S .browseL 公开 浏览 带 的 细 而 ( 官方 废弃 )。 
完 来 看 下 jQuery 如 何 禁 用 动画 。 


6.1.1 禁用 动画 


有 了 时, 我 们 可 能 希望 在 包含 各 种 动画 效 采 的 页 面 上 有 条 件 地 禁用 动画 。 这么 做 可 能 是 因为 已 
经 检测 到 当前 设备 或 者 平台 不 能 很 好 地 处 理 动画 ， 或 者 由 于 可 访问 性 的 原因 。 

无 论 哪 种 情况 ,都 不 需要 编写 两 个 页 面 , 一 个 使 用 动画 而 男 一 个 不 使 用 动画 。 当 检测 到 当前 
处 于 不 支持 动画 的 环境 时 ,设置 $ .fx.off 为 true 即 可 。 

这 不 会 废除 已 经 在 页 面 上 使 用 的 任何 特效 ,只 是 简单 地 禁用 了 这 些 动 画 特 效 。 例如， 消退 特 
效 会 立即 显示 或 隐藏 元 素 ， 没 有 过 渡 动 男 。 

类 似 地 ， 调 用 animate () 方 法 将 会 设置 CSS 属性 为 指定 的 最 终 值 ， 跳 过 动画 过 程 。 

比如 在 菜 些 不 能 正确 文 持 动画 的 移动 设备 或 者 浏览 锅 中 , 就 可 能 会 用 到 这 个 标志 。 在 那 种 情 
况 下 ， 你 可 能 想 要 关闭 动画 以 便 核心 功能 正常 运行 。 

$ .fx.off 是 一 个 可 读 / 写 的 标志 , 其 余 的 预定 义 标志 是 只 读 的 。 下 面 来 看 下 浏览 絮 的 用 户 代 
理 ( User Agent ) 提供 的 有 关 环 境 信 息 的 标志 。 


6.1.2 检测 用 户 代 理 支 持 


值得 高 兴 和 感激 的 是 ， 迄 今 为 目 已 研究 的 jQuery 方法 屏蔽 了 浏览 硕 的 差异 ， 即 便 是 传统 的 
问题 区 ,例如 事件 处 理 也 是 如 此 。 但 是 ， 当 我 们 目 己 写 这 些 方法 (或 者 其 他 扩展 ) 的 时 候 ， 可 能 
需要 考 愿 浏览 硕 操 作 方 式 的 差异 ， 以 便 让 使 用 扩展 的 用 户 不 用 关心 这 些 差 异 。 

在 深入 了 解 jQuery 如 何在 实现 这 个 功能 之 前 ， 和 对 来 探讨 下 浏览 硕 检 测 的 整个 概念 。 

1. 为 什么 浏览 器 检测 是 可 异 的 

好 吧 ， 或 许 “ 可 展 的 ”这 个 词 有 点 过 了 ,但 是 除非 绝对 必要 ， 否 则 应 该 尽量 避免 使 用 浏览 
检测 技术 。 

浏览 璐 检测 初 看 起 来 似乎 是 处 理 浏 览 融 差 异 的 合乎 逻辑 的 方式 。 毕 葛 ， 很 容 多 这 么 说 ,，“ 我 
知道 浏览 各 X 的 功能 集 ， 因 此 面 回 浏览 硕 的 测试 绝对 行 得 通 ， 不 是 吗 ? ”但 是 浏览 硕 检 测 却 充 
满 了 陷阱 和 问题 。 

反对 这 种 技术 的 主要 论点 之 一 是 浏览 硕 种 类 索 多 , 再 加 上 同一 浏览 硕 的 不 同 版 本 文 持 的 级 别 
不 同 ， 使 得 这 一 技术 无 法 解决 可 扩展 性 问题 。 

你 可 能 会 想 ,“ 好 ， 我 只 需要 测试 正和 Firefox 浏览 器 。” 但 是 怎 能 排除 不 断 增 长 的 Safari 用 
户 呢 ? 还 有 Opera 和 Google 的 Chrome 浏览 厚 呢 ? 此 外 , 还 有 一 些小 众 的 但 并 非 无 足 轻 重 的 浏览 
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器 ， 它 们 和 更 加 流行 的 浏 览 需 分 享 功 能 配置 信息 。 例 如 ，Camino 是 一 球 与 Firefox 使 用 相同 的 技 
术 并 拥有 Mac 友好 的 用 户 界面 的 浏览 大 。OmniWeb 则 使 用 与 Safari 和 Chrome 相同 的 演 染 引擎。 

没有 必要 排除 对 这 些 浏 览 帮 的 文 持 , 但 是 对 它们 进行 测试 却 是 相当 痛苦 的 。 而 这 还 没有 考虑 
不 同 版 本 之 间 的 差异 一 一 例如 下 6、IE7 和 1IE 8。 

为 一 个 原因 是 ， 如 采 对 某 个 特定 的 浏览 带 进 行 测试 , 但 是 未 来 发 布 的 版 本 修正 了 该 问题 , 那 
我 们 的 代码 实际 上 可 能 就 不 工作 了 。jQuery 解决 这 一 问题 的 蔡 代 方法 (将 在 下 一 市 中 讨论 ) 是 到 
励 浏 览 名 厂商 来 修复 这 些 jQuery 已 经 解决 了 的 问题 。 

最 后 一 个 反对 浏览 硕 检 测 〈《 有 时 也 被 称 为 嗅 探 ) 的 论点 是 , 目前 越 来 越 难 知道 “ 谁 是 谁 ”J 了 。 

浏览 硕 通 过 设置 一 个 称 为 用 户 代 理 字 符 串 的 请 求 头 〈requestheader ) 来 标识 目 己 。 解 析 这 个 
字符 串 就 已 经 让 人 望而却步 了 。 况 且 现 在 很 多 浏览 句 允 许 用 户 伪造 (spoof ) 这 个 字符 串 ， 因 此 
在 克服 所 有 困难 解析 了 这 个 字符 串 之 后 ， 也 不 能 相信 它 就 是 真实 的 结 

一 个 名 为 navigator 的 JavaScript 对 象 包 含 了 用 户 代 理 的 一 部 分 信息 ,但 是 它 也 存在 浏览 磊 
差异 "。 我 们 几乎 是 为 了 进行 浏览 器 检测 而 必须 进行 浏览 器 检测 1! 

停止 这 狗 狂 的 行为 ! 

浏览 硕 检 测 的 特征 如 下 。 

口 不 精确 一 一 偶尔 会 意外 地 限制 一 些 浏览 锅 ， 而 这 些 浏览 希 本 来 可 以 正 浓 运行 代码 。 

口 不 可 扩展 一 一 为 了 梳理 事情 而 导致 大 量 通 套 的 if 和 if-else 语句 。 

口 不 准确 一 一 因为 用 户 可 以 伪造 用 户 代理 信息 。 

很 明显 ， 只 要 可 能 就 应 该 避免 使 用 浏览 希 检 测 这 个 方法 。 

但 是 能 够 做 些 什 么 来 代替 呢 ? 

2. 浏览 器 检测 的 替代 方案 是 什么 

如 末 仔 细 想 一 下 ， 就 可 以 知道 我 们 对 用 户 使 用 的 是 什么 浏览 硕 并 不 真正 感 兴趣 ， 难 扎 不 是 
吗 ? 考虑 浏览 融 检 测 的 唯一 原因 , 是 因为 需要 知道 可 以 使 用 浏览 万 的 哪些 功能 和 特征 。 我 们 真正 
想得到 的 是 浏览 硕 的 功能 和 特征 ， 而 浏览 硕 检测 不 过 是 试图 确定 这 些 功能 和 特征 的 尝 拙 方式 。 

此 为 什么 不 直接 摘 清 楚 这 些 特性 , 而 是 试 网 通过 浏览 硕 识 别 来 推 半 它们 呢 ? 被 广泛 称 为 特 
征 检测 的 技术 允许 代码 基于 特定 的 对 象 、 属 性 ， 其 至 是 方法 是 否 存 在 来 进行 分 文 。 

作为 示例 , 回想 一 下 第 4 草 的 事件 处 理 内 容 。 记 得 有 两 个 高 级 事件 处 理 模型 : W3C 标准 DOM 
第 2 级 事件 模型 和 IE 专 有 的 事件 模型 。 这 两 个 模型 都 在 DOM 元 素 上 定义 方法 以 便 创建 监听 怖 ， 
但 是 它们 使 用 不 同 的 方法 名 称 。 标 准 模 型 定义 的 方法 为 aqaqEventListener()， 而 下 模型 定义 
的 方法 为 attachEvent ()。 

使 用 浏览 妖 检 测 ， 而 且 假 设 我 们 已 经 克服 了 确定 当前 使 用 的 是 什么 浏览 右 ( 可 能 是 正确 的 ) 
的 痛 兰 和 烦躁 ， 可 以 这 样 编写 代码 : 


complex code to set flags: isIE, isFirefox, and isSafari 

































































If (isIE) { 


这 里 指 的 是 不 同 浏览 器 中 window .navigator .userAgent 的 字符 串 格 式 各 不 相同 。 
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element . attachnhEvent ('onclick',someHandler); 

} 

else if (isFirefox || isSafari) { 
element.addEventListener('click',someHandler); 

} 

else { 
throw new Error('event handling not supported'); 


} 
除了 这 个 例子 所 掩盖 的 事实 ,也 就 是 必然 要 使 用 复杂 的 代码 来 设置 标志 isIE、isFirefox、 
isSafari 之 外 ， 我 们 也 不 能 确定 这 些 标志 是 否 精确 地 描述 了 当前 使 用 的 浏览 顶 。 此 外 ， 这 段 代 
码 在 Opera、Chrome 、Camino、OmniWeb 或 者 在 其 他 许多 不 知名 的 浏览 锅 中 使 用 时 将 会 抛 出 错 
误 ， 尽管 这 些 济 览 各 可 能 完美 地 文 持 标准 模型 。 
考虑 这 段 代 人 码 的 如 下 变 体 : 
if (element.attachEvent) { 
element .attachEvent ('onclick',someHandler); 
2 if (element.addEventListener) { 
element .addEventListener('click',someHandler).; 
a { 


throw new Error('event handling not supported').; 


b 

这 段 代 但 没有 进行 大 量 复杂 的 、 基 本 上 不 可 靠 的 浏览 硕 检 测 , 但 它 文 持 所 有 的 浏览 希 ， 只 要 
这 些 浏 览 硕 文 持 两 种 对 立 事件 模型 中 的 任何 一 个 即 可 。 这 好 多 了 ! 

特征 检测 大 大 优 于 浏览 右 检 测 。 特征 检 测 更 加 可 徘 , 并 且 不 会 意外 地 限制 那些 文 持 所 测试 功 
能 的 浏览 硕 ， 只 不 过 因为 我 们 不 了 解 该 浏览 硕 的 特征 或 者 不 了 解 浏 览 硕 本 号 。 在 最 近 的 Web 应 
用 中 你 考虑 到 Google 的 Chrome 浏览 器 了 吗 ” 考虑 到 iCab 、Epiphany、Konqueror 了 吗 ?" 























i 


注意 D00000000000000000000000000000000000000 
DDOUDUUDUOUOUUUUUUUUUUD 





尽管 特征 检测 可 能 比 浏览 硕 检 测 更 具有 优势 ， 但 是 它 并 非 轻 而 多 举 。 在 页 面 中 引入 分 文 和 
类 型 检测 依然 是 乏味 和 痛 音 的 ， 并 且 一 些 特征 差异 非常 难于 检测 ， 需 要 索 琐 的 或 者 全 面 的 复杂 
检查 。jQuery 帮助 我 们 执行 这 些 检查 ， 并 提供 一 组 标志 用 来 检测 我 们 可 能 关心 的 、 最 常见 的 用 
户 代理 特征 。 

3. jQuery 浏览 器 功能 标志 

浏览 磊 功 能 标志 是 作为 jQuery 的 $ .support 对 象 的 属性 公开 的 。 

表 6-1 总 结 了 该 对 象 的 可 用 标志 。 














QD icab 是 Mac 下 的 浏览 器 ，Konqueror 和 Epiphany 是 Linux 下 的 浏览 器 。 
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1A Se 


$ .support 浏 览 器 功能 标志 


摘 述 


表 6-1 























boxModel 如 采用 户 代理 按照 标准 兼容 的 盒 模型 泻 染 ,， 则 设置 为 true。 这 个 标志 直到 文件 就 绪 后 才 
设置 。 更 多 有 关 盒 模型 问题 的 描述 可 以 从 以 下 网 址 获取 : http://www.quirksmode.org/css/box. 
html 和 http:/www.w3.org/TR/ RECCSS2/box.html 

cssploat 如 果 使 用 了 标准 的 cssF1loat 属 性 来 描述 元 素 的 style 属 性 ， 则 设置 为 true 

hrefNormalized 如 果 获 取 元 素 的 href 特 性 得 到 的 值 和 指定 的 值 一 模 一 样 ， 则 设置 为 Etrue 

htmlSerialize 如 果 浏 览 锅 对 通过 innerHTML 搬 入 DOM 中 的 <1Link> 元 素 所 引用 的 样式 表 求 值 ， 则 设置 
为 true 

leadingWhitespace 如 果 浏 览 器 保留 通过 innerHTML 搬 和 人 文本 的 开头 空白 字符 ， 则 设置 为 true 

noCloneEvent 如 有 果 浏 览 喜 在 复制 元 素 时 不 复制 事件 处 理 右 ， 则 设置 为 true 

objectAll 如 采 问 JavaScript 的 getElementsByTagName () 方 法 传人 “*” 时 该 方法 返回 所 有 的 后 代 
元 素 ， 则 设置 为 true 

opacity 如 果 浏 览 器 正确 解析 标准 的 CSS 属 性 opacity， 则 设置 为 true 

SeriptEyal 如 果 浏 览 絮 对 通过 appendchild() 或 createTextNode() 方 法 插入 到 DOM 中 的 
<script> 块 求 值 ， 则 设置 为 true 

style 如 果 用 来 获取 元 素 内 联 样 式 属性 的 特性 名 称 是 style 则 设置 为 true 

tbody 如 果 通 过 innerHTML 插 入 缺少 <tbody> 的 表 元 素 时 浏览 各 不 自动 回 表 中 添加 此 元 系 ， 则 


设置 为 true 


表 6-2 显示 了 这 些 标志 在 不 同 训 览 融 中 的 值 。 


表 6-2 $ .support 标 志 在 各 个 浏览 器 中 的 值 


Gecko (FirefoxX、 WebkKit (Safari、 


标志 属性 Camino 等 ) OmniWeb、Chrome 等 ) Po 5 
boxModel true true true quirks 模 式 下 为 false， 
标准 模式 下 为 true 
CssFloat true true true false 
hrefNormalized true true true false 
htmlSerialize true true true false 
leadingWhitespace true true true false 
noCloneEvent true true true false 
objectAll true true true false 
opacity true true true false 
scriptEval true true true false 
style true true true false 
tbody true true true false 





正如 所 料 ， 这 归根 结 压 是 IE 训 览 项 和 标准 兼容 的 训 览 带 之 间 的 差异 。 但 是 不 要 以 为 可 以 回 
到 浏览 絮 检 测 ， 那 种 方式 会 以 失败 告终 ， 因 为 IE 浏览 器 的 未 来 版 本 可 能 会 修正 漏洞 和 差异 。 记 
住 ， 其 他 浏览 硕 也 可 能 会 在 无 意 中 引 入 问题 和 差异 。 
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当知 要 进行 功能 判断 时 特征 检测 总 是 优 于 麟 览 副 检测 , 但 是 特征 检测 未 必 总 能 解决 问题 。 在 
一 些 很 少见 的 情况 下 ,我 们 需要 求助 于 特定 的 浏览 瘟 判 断 ， 而 这 只 能 通过 浏览 可 检测 来 完成 (很 
快 就 会 看 到 一 个 示例 )。 对 于 这 些 情况 ，jQuery 提供 了 一 组 标志 来 进行 耻 接 的 浏览 带 检 测 。 


6.1.3 ”浏览 器 检测 标志 


在 只 能 使 用 浏览 各 检测 的 情况 下 ， 可 以 使 用 jQuery 提供 的 一 组 标志 来 进行 分 文 。 这 些 标志 
在 加 载 库 时 被 创建 ， 这 使 得 它们 在 任何 就 绪 处 理 顺 执行 前 就 已 经 可 用 了 ， 并 被 定义 为 通过 
$s .browser 引用 的 对 象 实例 的 属性 。 

注意 ， 尽 管 这 些 标志 在 jQuery1.3 以 及 以 后 的 厂 本 中 依然 存在 ， 但 却 被 视 为 已 废弃 ， 这 意味 
者 可 以 在 将 来 任何 jQuery 发 布 版 中 删除 ， 因 此 在 使 用 这 些 标志 时 应 该 考 感 到 这 一 点 。 在 浏览 
发 展 停 消 的 时 期 这 些 标志 可 能 会 更 有 用 , 但 是 现在 处 于 浏览 融 选 勃发 展 的 时 代 , 功能 支持 标志 
有 意义 并 且 很 可 能 会 存在 一 段 时 间 。 

事实 上 ， 当 核心 文 持 标 志 没 有 提供 所 需 的 值 时 ， 建 议 你 创建 一 个 新 的 自 定 义 标志 。 不 过 我 们 
很 快 就 会 探讨 这 方面 的 内 容 。 

表 6-3 描述 了 浏览 硕 文 持 标志 。 

注意 这 些 标志 不 会 试图 识别 当前 使 用 的 具体 的 浏览 需 。jQuery 根据 浏览 需 所 属 的 家 族 对 用 户 
代理 进行 分 类 , 通 帝 根据 使 用 的 泻 染 引 擎 进行 判定 。 属 于 同一 家 族 的 浏览 硕 具 有 相同 的 几 组 性 质 ， 
此 没 必要 识别 具体 的 浏览 器 。 









































表 6-3 $$.browser 用 尸 代理 检测 标志 


标志 属性 撕 述 
msie 如 果 用 户 代 理 被 识别 为 任意 版 本 的 下 浏览 右 ， 则 设置 为 true 


mozilla 如 果 用 户 代 理 被 识别 为 任意 基于 Mozilla 的 浏览 器 ， 则 设置 为 true。 这 类 浏览 器 包括 Firefox 和 Camino 
safari 如 果 用 户 代理 被 识别 为 任意 基于 WebKit 的 浏览 带 ， 则 设置 为 Lrue。 比 如 Safari、Chrome 以 及 OmniWeb 
opera 如 果 用 户 代 理 被 识别 为 Opera 浏 览 絮 ， 则 设置 为 true 

version 设置 为 浏览 器 演 染 引擎 的 版 本 号 


绝 大 多 数 稼 用 的 现代 浏览 硕 都 属于 这 四 个 浏览 硕 家 族 之 一 ， 包 括 Google 的 Chrome 浏览 大 ， 
由 于 其 使 用 的 是 WebKit 引擎 ， 所 以 返回 的 safari 标志 为 true。 

version 属性 特别 值得 关注 ， 因为 它 可 能 不 像 我 们 想像 的 那样 方便 。 这 个 属性 的 值 不 是 浏览 
器 的 版 本 号 〈 刚 开始 我 们 可 能 这 样 认 为 ) 而 是 浏览 带 演 染 引 擎 的 版 本 号 。 例 如 ， 当 在 Firefox3.6 
下 运行 时 ,报告 的 版 本 号 是 1.9.2 一 一 Gecko 泻 染 引擎 的 版 本 号 。 用 这 个 值 来 区 分 了 正 浏 览 需 的 版 
本 是 很 方便 的 ， 因 为 下 浏览 器 的 演 染 引 敬 版 本 号 和 浏览 旨 版 本 号 是 匹配 的 。 

前 面 曾 提 到 , 有 时 我 们 不 能 指望 特征 检测 而 必须 借助 于 浏览 需 检 测 。 这 种 情况 的 一 个 示例 是 ， 
浏览 需 之 间 的 差异 并 不 是 它们 使 用 不 同 的 对 象 类 或 者 不 同 的 方法 , 而 是 传人 方法 的 参数 在 不 同 浏 
览 器 下 的 实现 有 不 同 的 解释 。 在 这 种 情况 下 ， 就 没有 用 于 检测 的 对 象 或 者 特征 了 。 
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注意 D0000000000000000000000000000000000000 
JQueryUUUUOOUOUOOOUOUUOUOOU00O00000000D0 jQueryUUUUOU 





以 <select> 元 系 的 add () 方 法 为 例 。W3C 对 其 定义 如 下 ( 想 参 考 规范 的 开发 者 请 移 步 到 这 
里 : http:/www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14493106 ): 


Selectilenent addlelenent, befove) 
对 于 这 个 方法 ， 第 一 个 参数 找 出 需要 添加 到 <select> 元 素 的 <option> 或 者 <optgroup> 元 
素 ， 第 二 个 参数 找 出 已 有 的 <option> (或 者 <optgroup> ) 元 素 ， 新 元 被 放置 于 该 元 素 之 前 。 在 
标准 兼容 的 浏览 锅 中 ， 第 二 个 参数 是 对 指定 的 现 有 元 素 的 引用 ， 而 在 IE 浏览 器 中 ， 它 是 现 有 元 
素 的 序号 索引 。 
为 没有 办 法 进行 特征 检测 来 决定 是 应 该 传递 对 象 引用 还 是 整数 值 ( 缺少 尝试 , 如 前 所 述 )， 
所 以 要 借助 于 浏览 器 检测 ， 如 下 面 的 例子 所 示 : 











var select = $('#aSelectElement')[0]; 
select.addl 
new Option('Two and \u0O0BD','2.5'), S$.browser.msie ? 2 : select.options[2] 


I 

在 这 上 段 代码 中 ， 我 们 对 $ .browser .msie 进行 简 单 的 测试 来 决定 是 应 该 传递 序号 值 2 还 是 
<select> 元 系 中 第 三 项 的 引用 。 

然而 , jQuery 团队 建议 我 们 不 要 在 代码 中 直接 使 用 浏览 絮 检 测 。 推荐 的 方法 是 创建 一 个 自 定 
义 的 支持 标志 来 把 浏览 益 检 测 提取 出 来 。 这 样 一 来 , 一旦 训 览 融 文 持 标记 冰 失 了 ,仅仅 需要 寻找 
另 一 种 方式 来 在 另 一 个 地 方 设 置 标 记 即 可 ， 从 而 避免 修改 代码 。 

例如 ， 在 我 们 自己 的 JavaScript 库 代码 中 ， 可 以 这 样 写 . 

$.support.useIntForSelectAdds = $.browser.msie; 
还 可 以 在 代码 中 使 用 这 个 标记 。 如 有 果 浏 览 带 检测 标志 被 删除 ， 只 需要 改变 库 代 码 ， 所 有 使 用 这 个 
目 定义 标志 的 代码 都 不 受 影 啊 。 

现在 ， 离 开标 志 的 世界 ， 来 看 看 jQuery 提供 的 实用 函数 。 


6.2 jQuery 与 其 他 库 并 存 


早 在 第 1 章 我 就 介绍 了 jQuery 团队 提供 了 的 一 个 体贴 周到 的 方法 ， 用 来 在 同一 个 页 面 上 轻 
松 地 使 用 jQuery 和 其 他 库 。 

通常 ， 当 在 同一 个 页 面 上 使 用 jQuery 和 其 他 库 时 ， 全 局 名 称 $ 的 定义 是 最 大 的 争论 和 冲突 的 
焦点 。 众 所 周知 ,jQuery 使 用 $ 作 为 jQuery 名 称 的 别名 ,并 将 其 用 于 jQuery 公开 的 每 一 个 功能 。 
但 是 其 他 库 ， 最 著名 的 就 是 Prototype， 也 使 用 $ 名 称 。 

jQuery 提供 了 $.noconflict() 实 用 男 数 用 来 放弃 对 $ 标 识 符 的 占用 ， 以 便 其 他 库 使 用 它 ， 
该 函数 的 语法 如 下 。 
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函数 语法 : $.noconflLict 
$ .noConflict (jqueryToo) 
将 标识 符 $s 的 控制 权 归 还 给 其 他 库 ， 允 许 在 页 面 上 混合 使 用 jQuery 与 其 他 库 。 一 旦 执行 了 该 
函数 ， 必 须 使 用 jQuery 标识 符 而 不 是 $ 标 识 符 来 调用 jQuery 的 功能 
你 也 可 以 放弃 jQuery 标识 符 〈 可 选 ) 
应 该 在 包含 了 jQuery 之 后 ， 但 尚未 包含 冲突 库 之 前 调用 这 个 方法 


参数 

JqueryToo (布尔 ) 如 果 提 供 了 该 参数 并 且 设 置 其 为 crue,， 则 会 一 并 放弃 S$ 和 jQuery 标 
识 符 

返回 值 

JQuery 





尽管 使 用 的 是 jQuery 标识 符 , 但 是 因为 $ 是 jQuery 的 别名 ,所 以 在 应 用 $ .noconflict () 
之 后 所 有 jQuery 的 功能 依然 可 用 。 作 为 对 失去 心爱 的 $ 符 号 的 补偿 ,我们 可 以 定义 更 短 的、 但 没 
有 冲突 的 jQuery 别名 ， 例 如 : 

Yar SS .JQuery 

男 一 个 常见 的 习惯 用 法 是 创建 一 个 作用 域 环境 ， 在 该 环境 中 $ 标 识 符 指 问 jQuery 对 象 。 在 
扩展 jQuery 的 时 候 这 是 个 常用 技巧 ， 特 别 是 对 于 插件 作者 来 说 ， 他 们 不 可 能 对 页 面 开 发 者 是 否 
已 经 调用 $ .noconf1ict() 作 出 任何 假设 ， 当 然 也 不 能 目 行 调用 此 了 哺 数 以 免 破 坏 页 面 开 发 者 的 

这 个 习惯 用 法 如 下 : 

(function($) { /* 这 里 是 函数 主体 */ }) (jQuery); 

如 有 果 这 个 符号 让 你 感到 头疼 ， 别 担心 ! 虽然 第 一 次 看 起 来 很 奇怪 ,但 它 其 实 非 常人 简洁 明了 了 。 

下 面 来 剖析 这 个 习惯 用 法 的 第 一 部 分 : 

(function($) { 人 六 这 里 是 函数 主体 大 }) 

这 部 分 声明 了 一 个 函数 并 用 圆 括号 括 起 来 , 由 此 生成 一 个 表达 式 , 这 个 表达 式 的 结果 是 对 一 
个 匿名 函数 的 引用 。 这 个 函数 期 望 传人 单个 参数 并 将 其 命名 为 $。 在 函数 主体 中 , 可 以 通过 s 标 识 
符 来 引用 任何 传递 给 这 个 函数 的 东西 。 因 为 参数 声明 优 和 匈 于 全 局 作用 域 中 任何 类 似 的 命名 标识 
符 ， 所 以 任何 在 孔 数 外 定义 的 $ 值 在 函数 内 都 会 被 传 入 的 参数 所 蔡 代 。 

这 个 习惯 用 法 的 第 二 部 分 : 

(JIQuery) 
在 匿名 孙 数 上 执行 函数 调用 ,将 jQuery 对 象 作 为 参数 传递 。 

结果 , 在 函数 外 部 不 管 s 标 识 符 是 否 已 经 在 Prototype 或 其 他 库 中 定义 , 在 函数 体内 它 总 是 指 
问 jQuery 对 象 。 很 漂亮 ， 对 吧 ? 
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当 使 用 这 个 技巧 时 ， 外 部 声明 的 $ 在 函数 体内 是 不 可 用 的 。 

除了 在 第 1 董 介绍 的 方法 外 ,这 个 习惯 用 法 的 一 个 变 体 也 经 常用 于 声明 就 绪 处 理 函数 ， 从 而 
形成 了 第 三 种 语法 。 考 虑 如 下 代码 : 

jQuery (function(s$) { 


aert(" Im ready!");， 


}); 

和 第 1 章 介 绍 的 一 样 ， 通 过 将 一 个 函数 作为 参数 传人 jQuery 函数 来 声明 就 绪 处 理 融 。 但 是 
这 次 ， 我 们 使 用 $ 标 识 符 声 明 传 人 束 绪 处 理 需 的 单个 参数 。 因 为 jQuery 总 是 将 jQuery 引用 作为 
第 一 个 也 是 唯一 的 参数 传人 就 绪 处 理 锅 , 所 以 确保 了 在 就 绪 处 理 需 内 $ 名 称 指 回 jQuery, 而 无 论 
在 处 理 硕 外 部 $ 的 定义 是 什么 。 

接 下 来 通过 一 个 简单 的 测试 来 证 明 这 一 点 。 测 试 的 第 一 部 分 , 先 来 看 看 代码 清单 6-1 中 的 HTML 
文档 ( 可 以 从 文件 chapter6/ready.handler.test.1.html 获取 )。 


代码 清单 6-1 就 绪 处 理 全 测试 


<!IDOCTYPE html> 




















<html> 
<head> 
<title>Hi!</title> 
<script type="text/javascript" src="../scripts/jquery-1.4.js"></script> 


<script type="text/javascript"> 


Var $ = 'Hil!l'; l . : 
I 和 声明 就 绪 处 理 器 0 使 用 自 定义 值 覆盖 $ 名 称 
alert(t's SS "YS 0 
上 
</script> 
</head> 
<body></body> 
</html> 


在 这 个 例子 中 , 我 们 引入 jQuery 库 。 众 所 周知 ,jQuery 库 定义 了 全 局 名 称 jQuery 和 别名 $。 
然后 将 全 局 变量 $ 重 定义 为 字符 串 值 @， 禾 盖 了 jQuery 的 定义 。 为 简单 起 见 ， 本 例 中 将 $ 蔡 换 为 
一 个 字符 串 值 ， 但 是 也 可 以 通过 包含 男 外 一 个 库 ( 例如 Prototype ) 来 重 定义 $。 

然后 定义 了 就 绕 处 理 融 人 @， 它 的 唯一 作用 是 弹出 一 个 显示 $ 值 的 警告 对 话 框 。 

当 页 面 加 载 时 ， 将 会 看 到 一 个 警告 对 话 框 ， 如 图 6-1 所 示 。 

关内 本 内 岂 ， Hil 


\ EO hp: localhos T a2 cha ter6 read .handlertest.1.html 
.ok Pp:// t/jqia2 /chapter6 /ready 


















The page at http:/ /localhost says: 


(AN $ = Hil 







图 6-1 由 于 对 $ 的 重 定义 已 生效 ， 因 此 在 就 绪 处 理 带 中 它 的 值 是 “Hil” 
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注意 ， 在 就 绪 处 理 硕 作用 域 中 ， 全 局 变量 $ 的 人 被 重新 定义 为 字符 串 赋 值 语 句 的 结 来 。 如 和 采 
想 在 处 理 硕 中 使 用 jQuery 定义 的 $ 值 ， 那 会 非常 失望 。 

现在 对 这 个 示例 文档 做 个 修改 。 下面 的 代码 只 显示 文档 已 修改 的 部 分 ; 小 的 改动 以 粗 体 突出 
显示 。( 可 以 从 chapter6/ready.handler.test.2.html 获取 完整 的 页 面 。) 


<script type="text/javascript"> 





Var $ = 'Hil!l'; 
]Query (function($)t 
alert('s Se We B®) 
大 
</script> 


我 们 所 做 的 唯一 改变 就 是 为 就 绪 处 理 锅 图 数 添加 了 一 个 名 为 $ 的 参数 。 加 载 这 个 修改 后 的 版 
本 ,会 看 到 完全 不 一 样 的 结果 ， 如 图 6-2 所 示 。 


H 








© http:i/ /localhost/jqia2 /chapterG /ready.handler.test,2.html 


The page at http:/ /localhost says: 


(@N\ $5 = function (selector, context) { 


return arguments,length === 07 rootiQuery : new jQuery,fn.init) 
(selector, context) 
} 





| Read localho 








图 6-2 ”现在 警告 对 话 框 显 示 的 是 jQuery 版 本 的 $5， 因为 在 函数 内 它 的 定义 被 强制 生效 了 


这 可 能 和 事先 预 料 的 结果 不 完全 一 致 ， 但 是 快速 浏览 一 下 jQuery 的 源 代码 就 会 发 现 ， 因 为 
我 们 在 jQuery 顶 数 中 将 就 绪 处 理 器 的 第 一 个 参数 声明 为 $, 所 以 $ 标 识 符 指 向 被 jQuery 库 当 作 唯 
一 的 参数 传人 所 有 就 绪 处 理 需 的 jQuey 也 数 ( 因此 警告 对 话 框 显示 的 是 jQuery 函数 的 定义 )。 

当 编 写 可 重用 的 组 件 并 且 这 些 组 件 可 能 会 用 于 已 经 使 用 了 $ .noconf1lict() 的 页 面 时 ,最 好 
对 gs 的 定义 采取 这 种 预防 措施 。 

还 有 大 量 的 jQuery 实用 晒 数 可 以 用 来 操作 JavaScript 对 象 。 下 面 来 仔细 学 习 这 些 果 数 。 

















6.3 操作 JavaScript 对 象 和 集合 


作为 实用 也 数 来 实现 的 多 数 jQuery 功能 被 设计 用 来 操作 JavaScript 对 象 而 非 DOM 元 率 。 一 
般 来 说 , 任何 在 DOM 上 操作 的 功能 都 是 作为 jQuery 包装 可 方法 提供 的 。 尽 管 部 分 实用 也 数 可 以 
用 来 操作 DOM 元 素 ( 毕竟 它们 也 是 JavaScript 对 象 )， 但 是 实用 函数 的 关注 点 不 是 DOM。 

这 些 羡 数 炙 盖 了 很 多 内 容 ， 从 人 窗 单 的 字符 串 操 作 、 类 型 检测 到 复 末 的 集合 过 滤 、 订 列 化 表单 
值 ， 甚 至 涵盖 了 通过 属性 合并 来 实现 对 象 继承 的 一 种 形式 。 

先 从 最 基础 的 开始 学 习 。 
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6.3.1 ”修剪 字符 蝇 


真是 不 可 思议 ，JavaScript 的 String 类 型 居然 没有 一 种 方法 来 删除 一 个 字符 串 实 例 开 头 和 
结尾 空 昌 学 符 , 在 大 多 数 其 他 语言 中 ,这 人 么 基本 的 功能 通常 是 string 类 的 一 部 分 ,但 是 JavaScript 
却 缺 少 这 个 有 用 的 功能 ， 让 人 很 费解 。 

然而 修 瘟 字符 串 是 很 多 JavaScript 应 用 中 的 常见 需求 ;一 个 典型 示例 是 在 表单 数据 验证 阶段 。 
由 于 空白 字符 在 屏幕 上 是 不 可 见 的 〈 因 而 得 名 “空白 ”)， 因 此 用 户 很 容 多 在 文本 框 或 文本 区 中 的 
有 效 数据 项 前 后 不 小 心 输入 多 余 的 空白 字符 。 在 验证 过 程 中 , 我 们 希望 悄悄 地 从 数据 中 删除 这 些 
空白 字符 ， 而 不 是 提醒 用 户 他 们 输入 的 数据 存在 一 些 不 可 见 的 错误 。 

为 了 帮助 我 们 ，jQuery 定义 了 $ .trim() 函数 ， 语 法 如 下 所 示 。 


























函数 语法 : $ .trim 
$.trim(value) 
删除 传 入 的 字符 串 开 头 和 结尾 处 的 空白 字符 ， 并 返回 修改 后 的 结果 
这 个 函数 中 的 空白 字符 被 定义 为 匹配 JavaScript 正则 表达 式 \s 的 任意 字符 ,不 仅 匹 配 空 白字 
符 ， 而 且 匹 配 换 页 、 换 行 、 回 车 、 制 表 ， 以 及 重 直 制 表 符 ， 还 包括 Unicode 字符 \u00A0 





参数 

value (字符 囊 ) 需要 修剪 的 字符 串 值 。 原 始 字符 串 值 不 会 改变 
返回 值 

修剪 后 的 字符 串 


使 用 这 个 函数 原 地 修剪 一 个 文本 字段 值 的 示例 如 下 : 

$s('#someField') .val ($.trim($('#someField') .val ())); 

注意 ， 这 个 函数 不 会 检查 传人 的 参数 来 确保 它 是 一 个 string 值 ， 因 此 如 采 问 这 个 函数 传人 
其 他 类 型 的 值 ， 我 们 将 得 到 ungdefined 或 者 令 人 遗憾 的 结果 (可 能 是 一 个 JavaScript 错误 )。 

下 面 来 看 一 些 在 数组 和 其 他 对 象 上 操作 的 函数 。 





6.3.2 ”遍历 属性 和 集合 


当 我 们 拥有 其 他 组 件 组 成 的 非 标 量 值 时 , 经 党 需要 通 历 其 中 包含 的 项 目 。 不 管 容 需 元 素 是 一 
个 JavaScript 数 组 ( 包含 任意 个 数 的 其 他 Javascript 值 , 含 数组 在 内 ) 还 是 JavaScript 对 象 的 实例 ， 
JavaScript 语言 都 提供 了 对 其 进行 壳 历 的 方法 。 对 于 数组 ， 使 用 for 循环 来 迄 历 其 中 的 元 素 ; 对 
于 对 象 ， 则 使 用 for-in 循环 来 遍历 其 中 的 属性 。 

各 编写 一 个 示例 ， 如 下 所 示 : 


var anArray = ['one', 'two', 'three'l]; 
for (var n = 0; n < anArray.length; n++) { 
//do something here 
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} 


var anObject = {one:1, two:2, three:3}.; 
for (var p in anObject) { 

//do something here 
} 


上 述 代 码 非常 简单 ， 但 是 有 些 人 可 能 认为 语法 有 点 罗 唆 和 复杂 一 一 这 也 是 对 for 循环 的 常 
见 批 评 。 我 们 知道 ， jQuery 定义 了 each () 方 法 来 操作 DOM 元 系 的 包 闭 集 ， 人 允许 我 们 轻松 地 过 
历 集合 中 的 元 素 而 无 需 使 用 麻烦 的 for 循环 请 法。 对 于 普通 的 数组 和 对 象 , jQuery 提供 了 类 似 的 
名 为 .each () 的 实用 病 数 。 

使 用 这 个 函数 的 好 处 是 ,无 论 是 遍历 数组 中 的 项 目 还 是 对 象 中 的 属性 ,使 用 的 语法 都 是 一 样 的 。 























函数 语法 : $.each 


$.each (container， callback) 


遍历 传 入 的 容器 中 的 每 一 项 ， 并 为 每 一 项 调用 传 入 的 回调 函数 


参数 

container (数组 | 对 象 ) 一 个 数组 ， 其 每 一 项 都 将 被 遍历 ; 或 者 一 个 对 象 ， 其 每 一 个 属 
性 都 将 被 遍历 

callback ( 滨 数 ) 为 容器 中 的 每 个 元 素 调 用 的 回调 函数 。 如 果 容 器 是 一 个 数组 ， 则 为 每 
一 个 数组 项 调用 回调 函数 ;， 如果 容器 是 一 个 对 象 ， 则 为 对 象 的 每 一 个 属性 调 
用 回调 函数 
回调 函数 的 第 一 个 参数 是 数组 元 素 的 下 标 或 对 象 属性 的 名 称 。 第 二 个 参数 是 数 
组 项 或 者 属性 值 。 将 传 入 的 第 二 个 参数 的 值 设 置 为 调用 函数 的 上 下 文 (this ) 

返回 值 

容器 对 象 





这 种 统一 的 霹 法 使 用 相同 的 格式 过 历数 组 或 对 象 。 使 用 这 个 困 数 编写 上 面 的 示例 , 如 下 所 示 : 
var anArray = ['one', 'two', 'three'l]; 

$s.each(anArray,function(n,value) f{ 

//do something here 


用 


var anObject = {one:1, two:2, three:3}; 
$s.each(anObject,function(name,value) { 
//do something here 


}); 

在 选择 语法 时 虽然 使 用 内 联 明 数 的 $ .each() 似 乎 是 一 个 半斤八两 的 解决 方案 ,但 是 这 个 也 
数 可 以 很 容易 地 编写 可 重用 的 迭代 姨 , 或 者 为 了 使 代码 清晰 可 以 很 容易 地 将 循环 体 提取 到 男 外 一 
个 子 数 中 ， 如 下 所 示 : 


$.each (anArray, someComplexFunction).; 


注意 ， 当 遍历 一 个 数组 或 者 对 象 时 ， 可 以 使 近 代 带 录 数 返 回 false 以 便 跳 出 循环 。 
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注意 D00000000000 each00000000 00000 each(OD0D0s.each() 
DUO U0UU0UUUUUUUUUUUU ford0 
UUDUUDUUUUUD 


有 了 时， 我 们 需要 遍历 数组 来 选择 一 些 元 素 并 将 其 添加 到 一 个 新 的 数组 中 。 尽 管 可 以 使 用 
$.each() 来 达到 目的 ， 但 是 jQuery 使 这 一 切 变 得 更 加 简单 ， 下 面 就 来 看 下 吧 。 
6.3.3 ”筛选 数组 

对 于 需要 频繁 处 理 大 量 数据 的 应 用 来 说 ， 遍 历数 组 以 查找 匹配 一 定 标 准 的 元 素 是 常见 需求 。 
我 们 可 能 希望 筛选 数据 ,查找 高 于 或 者 低 于 特定 临界 值 ， 或 者 可 能 是 匹配 一 定 模式 的 数据 。 对 于 
任何 这 种 类 型 的 筛选 操作 ，jQuery 提供 了 $ .srep () 实 用 函数 。 

$ .grep () 函数 的 名 称 可 能 会 让 我 们 以 为 它 使 用 正则 表达 式 ， 就 像 其 在 UNIX 下 的 同名 命令 
grep 那样 。 但 是 $ .grep () 实用 函数 使 用 的 筛选 标准 不 是 正则 表达 式 ， 而 是 由 调用 者 提供 的 回调 
函数 ， 用 来 决定 数据 值 是 否 应 该 包含 在 结果 值 集合 中 。jQuery 不 会 阻止 回调 函数 使 用 正则 表达 式 
来 完成 任务 ， 但 是 正则 表达 式 的 使 用 不 是 自动 完成 的 。 

这 个 函数 的 语法 如 下 所 示 。 
































函数 语法 : $.grep 
$.grep(array, callback, invert) 
遍历 传 入 的 数组 ， 为 每 个 元 素 调 用 回调 函数 。 回 调 函 数 的 返回 值 决 定 是 否 应 该 将 当前 值 收集 
到 一 个 新 数组 中 ， 这 个 新 数组 将 作为 $.grep() 函 数 的 返回 值 。 如 果 invert 参数 被 省 略 或 者 
为 false， 回 调 函 数 返 回 true 将 性 致 数据 被 收集 。 如 果 invert 设置 为 true， 回 调子 数 返 
回 false 将 导致 数据 被 收集 
原始 数组 不 受 影 响 


array (数组 ) 需 要 遍历 的 数组 , 它 的 数据 值 将 会 被 检查 以 确定 是 否 应 该 收集 到 新 数 
组 中 。 这 个 操作 不 会 以 任何 方式 修改 数组 

callback (函数 ) 一 个 函数 ， 它 的 返回 值 决 定 是 否 应 该 收集 当前 数据 值 , 返回 true 则 导致 
当前 值 被 收集 ,除非 invert 参数 的 值 设 为 true, 这 种 情况 下 会 发 生 相反 的 事情 
这 个 函数 接受 两 个 参数 >: 当前 的 数据 值 和 其 在 原始 数组 中 的 下 标 

invert (布尔 ) 如 果 指 定 为 true， 则 反 转 函数 的 正常 操作 

返回 值 


由 收集 的 值 组 成 的 数组 


Q 这 里 指 的 是 2.3.4 节 中 使 用 each () 方 法 遍历 包装 集中 的 元 素 。 
@) 注意 ， 这 个 函数 的 参数 顺序 和 $ .each() 回 调 函 数 的 参数 顺序 刚好 相反 。 
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比方 说 ， 要 筛选 数组 中 所 有 大 于 100 的 值 。 可 以 通过 如 下 语句 实现 : 
var bigNumbers = S$.grep(originalArray,function(value) { 
return value > 100; 


}); 
传人 $ .grep() 的 回调 函数 可 以 进行 任何 处 理 ， 以 决定 是 否 应 该 包含 当前 值 。 这 个 决定 可 能 
像 上 述 示例 一 样 简 单 ， 也 可 能 像 向 服务 器 发 出 同步 的 Ajax 请 求 (有 一 定 的 性 能 损失 ) 以 决定 是 














虽然 $.grep () 困 数 不 直接 使 用 正则 表达 式 ( 别 在 意 它 的 名 称 )， 但 是 JavaScript 正则 表达 式 
是 一 个 强大 的 工具 ,用 来 在 回调 了 泡 数 中 决定 是 否 应 该 在 结果 数组 中 包含 某 些 值 。 考虑 这 样 一 个 场 
景 ， 我 们 有 一 个 数组 并 是 希望 标 识 出 不 匹配 美国 邮政 编码 ( 也 被 称 为 Zip 编码 ) 格式 的 任何 值 。 

美国 的 邮政 编码 由 5 个 十 进 制 数组 成 ， 后 面 跟 着 一 个 破 折 号 和 男 外 4 个 十 进 制 数 (可 选 )。 
匹配 这 个 模式 的 正则 表达 式 是 /^\g{5} (-\a{4})?$/, 因此 可 以 使 用 如 下 代码 从 源 数 组 中 过 小 那 
些 不 符合 标准 的 数据 项 : 


var badzZips = S$S.grepl 
originalArray, 



































function(value) { 
return value.match(/^\d{5}(-\d{4})?$/) 1= null; 
}, 


true); 

注意 ， 这 个 示例 使 用 了 string 类 的 match() 方 法 来 决定 一 个 值 是 否 匹 配 模式 ， 并 有 旦 指定 
$ .grep() 的 invert 参数 为 true 来 排除 任何 匹配 模式 的 值 。 

获取 数组 的 数据 子 集 并 不 是 在 数组 上 进行 的 唯一 操作 。 下 面 来 看 看 jQuery 提供 的 另外 一 个 
面向 数组 的 函数 。 
6.3.4 ”转换 数组 

数据 并 不 总 是 以 我 们 需要 的 格式 存在 。 在 以 数据 为 中 心 的 Web 应 用 中 ， 男 一 个 常见 操作 是 
将 一 组 值 转换 为 男 一 组 值 。 虽 然 编写 for 循环 从 一 个 数组 创建 男 一 个 数组 是 一 件 简单 的 事情 ， 
但 是 jQuery 的 $ .map 实用 函数 让 这 一 任务 更 加 简单。 























函数 语法 : $ .map 
$.map(array, callback) 
遍历 传 入 的 数组 ,为 数组 的 每 一 项 调用 回调 函数 ， 并 将 函数 调用 的 返回 值 收集 到 一 个 新 的 数组 中 
array (数组 ) 一 个 数组 ， 它 的 值 将 被 转换 为 新 数组 中 的 值 
callback (函数 ) 一 个 函数 ， 它 的 返回 值 将 被 收集 到 一 个 新 数组 中 ， 这 个 新 数组 作为 
$ .map () 函数 的 调用 结果 
这 个 函数 接受 两 个 参数 : 当前 的 数据 值 和 其 在 原始 数组 中 的 下 标 
返回 值 
由 收集 的 值 组 成 的 数组 
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来 看 一 个 展示 如 何 调 用 $s .map () 函数 的 示例 。 

Var oneBased = $.map([0,1,2,3,4],function(value) {return value+l1;}); 

这 个 语句 将 值 从 0 开始 的 数组 转换 为 相应 的 从 1 开始 的 数组 。 

需要 注意 的 一 个 重要 的 行为 是 ， 如 果 卫 数 返 回 null 或 者 undefined， 那 结果 就 不 会 被 收集 。 
在 这 种 情况 下 ,结果 数组 的 长 度 将 小 于 原始 数组 的 长 度 ,并 且 数 组 项 之 间 一 对 一 的 顺序 也 不 存在 了 。 

下 面 看 一 个 稍微 复杂 的 示例 。 假 设 有 一 个 期 望 表示 数字 值 的 字符 串 数 组 , 也 许 是 从 表单 字段 
收集 来 的 ， 我们 希望 把 这 个 字符 串 数 组 转换 为 相应 的 Number 实例 的 数组 。 由 于 不 能 保证 是 否 存 
在 无 效 的 数字 字符 串 ， 因 此 需要 事先 采取 预防 措施 。 考 虑 如 下 代码 : 


Var strings = [1','2','3','4','S','6']; 
































Var values = S$.map(strings,function(value)t 
Var result = new Number (value).; 
return isNaN(result) ? null : result; 


ps 

完 从 一 个 字符 串 数组 开始 ， 其 中 的 每 一 项 都 代表 一 个 数字 值 。 但 是 由 于 打字 错误 (或 者 用 户 
输入 错误 ) 导致 字母 S 奉 代 了 正确 的 数字 $。 这 上 段 代 码 通过 检查 构造 需 创 建 的 Number 实例 来 判 
汤 从 字符 串 到 数字 的 转换 是 否 成 功 。 如 果 转 换 失 败 ， 返 回 的 值 将 是 闸 量 Number .NaN。 但 有 趣 的 
是 ， 从 定义 上 讲 Number .NaN 不 等 于 任何 其 他 的 值 ， 包 括 它 自己 ! 因此 表达 式 Number .NaN== 
Number .NaN 的 结果 是 false。 

因为 不 能 使 用 一 个 比较 操作 符 测试 NaN (顺便 提 一 下 ， 它 代表 Nota Number， 即 不 是 一 个 数 
字 )，JavaScript 提供 了 isNaN () 方 法 ， 用 来 测试 从 字符 串 到 数字 的 转换 结 

在 这 个 例子 中 ， 转 换 失败 时 返回 nul1， 以 确保 结 采 数组 中 只 包含 有 效 的 数字 值 同时 也 剔除 
了 任何 错误 的 值 。 如 果 想 收集 所 有 的 值 ， 可 以 让 转换 函数 为 那些 错误 的 值 返回 Number .NaN。 

$ .map() 为 一 个 有 用 的 行为 是 ， 它 可 以 优雅 地 处理 从 转换 函数 返回 数组 的 情况 ， 并 将 返回 的 
值 合并 到 结果 数组 中 。 考 虑 如 下 语句 : 

Var characters = S$.mapl 

['this','that', other thing'], 


funotion(tvalue) {return value, sblit(t'yysy 
); 
这 个 语句 将 字符 串 数 组 转换 为 构成 字符 串 的 所 有 字符 组 成 的 数组 。 执 行 后 变量 characters 
的 值 如 下 所 示 : 
[| 
这 是 使 用 string.split() 方 法 完成 的 , 当 向 其 传递 一 个 空 字 符 串 作为 分 隔 符 时 它 会 返回 包 
含 字 符 串 中 学 符 的 数组 。 这 个 数组 作为 转换 函数 的 结果 返回 ， 并 且 被 合并 到 结果 数组 中 。 
jQuery 对 数组 的 支持 远 不 止 这 些 。 还 有 一 些 较 小 的 函数 也 会 带 来 方便 。 


6.3.5 ”发 现 JavaScript 数 组 的 更 多 乐趣 


你 曾 有 过 需要 知道 某 个 JavaScript 数组 是 否 包 含 特定 值 吗 ? 甚 至 还 想 知道 该 值 在 数组 中 的 
位 置 吗 ? 
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如 果 是 这 样 ， 你 将 会 感激 $ .inArray () 函数 。 


函数 语法 : $.inArray 
$.inArray (value, array) 
返回 传 入 的 值 第 一 次 出 现时 的 下 标 
参数 
Value ( 对象 ) 需要 在 数组 上 搜索 的 值 
array (数组 ) 将 要 被 搜索 的 数组 
返回 值 
该 值 在 数组 中 第 一 次 出 现时 的 下 标 ， 如 果 没 有 查找 到 这 个 值 ， 则 返回 -1 


一 个 足以 说 明 这 个 函数 用 法 的 示例 : 

var index = $.inArray(2,11,2,3,4,5]); 

这 将 导致 下 标 值 1 被 赋值 给 indqex 变量 。 

还 有 男 一 个 数组 相关 的 有 用 的 也 数 ， 这 个 吗 数 可 以 从 其 他 类 似 数组 的 对 象 创建 JavaScript 数 
组 。“ 其 他 类 似 数组 的 对 象 ? 到 底 什 么 是 类 似 数组 的 对 象 ” ”你 可 能 会 问 。 

jQuery 认为 类 似 数组 的 对 象 就 是 拥有 长 度 和 下 标 项 概念 的 任何 对 象 。 在 处 理 NodeList 对 象 
时 这 个 功能 非常 有 用 。 考 虑 如 下 代码 卢 段 : 

var images = document.getElementsByTagName ("img"); 
这 个 语句 将 页 面 上 所 有 图 片 组 成 的 NodeList 赋值 给 images 变量 。 

处 理 NodeList 有 点 痛 兰 " ,因此 将 其 转换 为 JavaScript 数 组 要 好 很 多 .jQuery 的 $.makeArray 
陋 数 使 得 转换 NodeList 非常 简单 。 














函数 语法 : $ .makeArray 
$ .makeArray (object) 
将 传 入 的 类 似 数组 的 对 象 转 换 为 JavaScript 数组 
object (对象 ) 需要 被 转换 的 类 似 数组 的 对 象 (比如 NodeList ) 
返回 值 
JavaScript 数组 





该 函数 适合 在 较 少 使 用 jQuery 的 代码 中 使 用 ， 因 为 jQuery 已 经 在 其 内 部 处 理 了 这 类 事情 。 
GD 这 里 指 的 是 不 能 对 NodeList 使 用 数组 的 原型 方法 ， 比 如 pop、push、slice 等 。 
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该 函数 在 下 面 情况 中 也 派 得 上 用 场 : 处 理 NodeList 对 象 时 不 使 用 jQuery 来 遍历 XML 文档 , 或 
者 处 理 函 数 内 的 arguments 实例 ( 你 可 能 会 惊讶 地 发 现 ， 它 不 是 标准 的 JavaScript 数组 )。 

还 有 男 一 个 很 少 使 用 到 的 函数 ， 但 在 处 理 非 jQuery 创建 的 数组 时 会 非常 有 用 ， 它 就 是 
$.unicue () 函数 。 


函数 语法 : $ .unique 

$.unicue (array) 
向 其 传 入 DOM 元 素 的 数组 ， 则 返回 由 原始 数组 中 不 重复 的 元 素 组 成 的 数组 
参数 
array (数组 ) 需要 检查 的 DOM 元 素数 组 
返回 值 
由 在 传 入 的 数组 里 不 重复 的 元 素 组 成 的 DOM 元 素数 组 

再 次 说 明 ，jQuery 内 部 也 使 用 $ .unique 因数 以 确保 得 到 的 元 素 列 表 不 包含 重复 的 元 系 。 它 

可 以 在 jQuery 范围 外 创建 的 元 素数 组 上 使 用 。 
想 合并 两 个 数组 吗 ? 没 问 题 ， 我 们 有 $ .merge 函数 。 


浮 数 语法 : $ .merge 





$.merge(arrayl, array2) 
将 第 二 个 数组 中 的 值 合并 到 第 一 个 数组 中 并 返回 结果 ,这 个 操作 会 修改 第 一 个 数组 并 将 其 作为 
结果 返回 


arrayl1 (数组 ) 将 要 合并 其 他 数组 的 数组 
arrav2 ( 数组 ) 将 要 被 合并 到 第 一 个 数组 的 数组 
返回 值 


合并 后 的 第 一 个 数组 


考虑 : 
var al = [1,2,3,4,5]; 
var a2 = [5,6,7,8,9]: 


$.merge (al,a2); 


这 段 代 码 执行 后 ，a2 没有 改变 ,但 是 al 变 成 了 [1,2,3,4,5,5,6,7,8,9]。 
现在 我 们 已 经 看 到 了 jQuery 如 何人 简化 对 数组 的 操作 ， 接 着 来 看 jQuery 如 何 帮 助 我 们 操作 普 
通 的 老式 JavaScript 对 和 象 。 


6.3.6 ”扩展 对 象 
虽然 我 们 都 知道 JavaScript 提供 了 很 多 特征 使 其 在 很 多 方面 的 行为 类 似 于 面向 对 象 的 语言 ， 
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但 是 JavaScript 并 不 是 人 们 第 说 的 纯粹 的 面 品 对象 的 语言 ， 因 为 它 不 支持 某 些 特征 。 其 中 一 个 重 
要 的 特征 是 继承 一 一 通过 扩展 现 有 类 的 定义 来 定义 新 类 的 方法 。 

在 JavaScript 中 模拟 继承 的 一 个 模式 是 ， 通 过 将 基础 对 象 的 属性 复制 到 新 对 和 象 来 扩展 对 和 象 ， 
扩展 的 新 对 象 拥有 基础 对 象 的 功能 。 





注意 D00D00” D000 Javascipt O00000000000000000000000 
UUDUDUUUUUUUUD prototyre UDUUUUUUUUUDUDU SS.extend() 0 
UUUDUUD prorotypeUUOUOOOOUOUOO0OUOUOUOUO0UOO0O0O00 
UUUOUUUOUOO0OUUOSueryUUDUOOUOODODOOUDDUDUIDDUDDDUDDDDDDDG 
DUD jQuery 





编写 执行 复制 操作 的 JavaScript 代码 来 实现 这 种 扩展 相当 容易 ， 不 过 正如 对 待 许多 其 他 过 程 
一 样 ，jQuery 预料 了 到 这 方面 的 需求 并 提供 了 一 个 现成 的 实用 因数 来 帮助 解决 问题 : 
$ .extend() 。 在 第 7 曹 中 我 们 将 会 看 到 ， 该 蚂 数 的 用 途 远 远 不 止 用 来 扩展 对 象 。 该 旺 数 的 语法 
如 下 。 





痕 数 语 法 : $ .extend 


$ .extend (deep, target, sourcel, source2, ..., SourceN) 


使 用 其 余 传 入 的 对 象 的 属性 来 扩展 传 入 的 target 对 象 


参数 

deep (布尔 ) 一 个 可 选 的 标志 ， 用 于 决定 当前 执行 的 是 深 复制 还 是 浅 复制 。 如 果 
省 略 或 者 为 false， 就 执行 浅 复 制 。 如 果 为 true， 则 执行 深 复 制 

target ( 对象 ) 一 个 对 象 ， 用 源 对 象 的 属性 来 扩展 目标 对 多 属性。 在 作为 函数 值 返 
回 之 前 ， 这 个 对 象 会 直接 被 新 属性 所 修改 。 任 何 与 源 元 素 中 的 属性 具有 相同 
名 称 的 属性 ， 都 会 被 来 自 源 元 素 的 值 所 履 盖 

sourcel... (对 象 ) 一 个 或 者 多 个 对 象 ， 它 或 者 它们 的 属性 将 会 被 添加 到 目标 对 办 

sourceN 当 有 一 个 以 上 的 源 时 ,在 参数 列表 后 部 的 源 属 性 会 履 盖 在 列表 前 部 的 源 中 具 
有 相同 名 称 的 属性 

返回 值 

扩展 的 目标 对 象 


下 面 来 看 看 这 个 函数 的 工作 方式 。 
我 们 将 创建 3 个 对 象 ，1 个 日 标 和 2 个 源 ， 如 下 所 示 : 


Var target = { a: 1, b: 2, c: 3 }; 
Var sourcel = { c: 4, d: 5, e: 6 1} 
Var source2 = { e: 7, f: 8, g: 9 } 
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然后 使 用 $ .extend () 操 作 这 些 对 象 ， 如 下 所 示 : 

$.extend (target, sourcel, source2); 

这 个 语句 将 会 获取 源 对 象 的 内 容 并 将 其 合并 到 目标 对 象 中 。 为 了 测试 这 个 操作 , 我 们 在 文件 
chapter6/$.extend.html 中 创建 了 示例 代码 ， 该 文件 会 执行 这 段 代 码 并 在 页 面 上 显示 结 

在 浏览 锅 中 加 载 此 页 面 ， 结 末 如 岁 6-3 所 示 。 


QQ@NO0 $.extend() Example = 





MeEa Say © http://localhost/jqia2 /chapter6/S.extend,html 顽 


target (before) = {a:1, b:2, c:3} 
sourcel = {c:4, d:5, e:6} 
SoUrce2 = {e:7, f:8, g:9} 

target (after) = {a:1, b:2, c:4, d:5, e:7, f:8, g:9} 


A 








图 6-3 $.extend() 困 数 不 重复 地 合并 多 个 源 对 象 的 属性 到 目标 对 象 ， 并 按照 指定 源 
对 象 的 相反 顺序 确定 对 象 实例 的 优先 级 


和 我 们 看 到 的 一 样 ， 源 对 象 中 的 所 有 属性 都 被 合 并 到 target 对 象 中 。 不 过 请 注意 下 列 的 重 
要 细微 差异 。 
口 target 和 sourcel 都 包含 一 个 名 为 c 的 属性 。 在 sourcel 中 c 的 值 蔡 换 了 原始 目标 中 
的 相应 值 。 
口 sourcel 和 source2 都 包含 一 个 名 为 e 的 属性 。 注意 当 合 并 到 target 时 ，source2 中 
e 的 值 覆 盖 了 sourcel 中 相应 的 值 ， 这 证 明了 在 参数 列表 中 后 面 的 对 象 比 前 面 的 对 象 具 
有 更 局 的 优先 级 。 
显然 这 个 实用 函数 在 很 多 场景 下 非常 有 用 , 在 这 些 场 景 中 某 个 对 象 必须 用 其 他 对 和 象 (或 者 一 
组 对 象 ) 的 属性 进行 扩展 , 但 只 有 在 第 7 章 学 习 如 何 定义 目 己 的 实用 函数 时 我 们 才 会 看 到 这 个 特 
征 的 一 个 具体 和 第 见 的 用 法 。 
在 学 习 如 何 定 义 实 用 琢 数 之 前 ， 我 们 还 需要 探讨 其 他 的 一 些 实用 函数 。 


6.3.7 序列 化 参数 值 


在 一 个 动态 的 、 高 交互 性 的 应 用 中 ， 提 交 请 求 是 件 屡 见 不 鲜 的 事情 不过, 这 也 是 最 初 促使 
万 维 网 发 展 成 为 网 络 的 事情 之 一 。 

这 些 请 求 经 常 是 作为 表单 提交 的 结果 而 被 发 送 的 ， 其 中 浏览 如 将 格式 化 包含 请 求 参数 的 请 
求 主体 。 有 了 时候 ,我们 将 <a> 元 素 href 特性 的 URL 值 作为 请 求 提交 。 在 后 一 种 情况 下 ， 正 确 
地 创建 和 格式 化 查询 字符 串 就 成 了 我 们 的 丙 任 ， 这 个 字符 串 包含 了 我 们 希望 在 请 求 中 包括 的 任 
何 参 数 。 
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服务 各 端的 模板 工具 一 般 都 会 提供 强大 的 机 制 来 帮助 我 们 构建 有 效 的 URL， 但 是 当 在 客户 
端 动态 地 创建 URL 时 候 ，JavaScript 并 没有 提供 太 多 的 文 持 。 请 记 住 ， 我 们 不 仅 需 要 正确 地 放置 
组 成 查询 字符 串 参 数 的 AND 符号 (& ) 和 等 号 (= )， 而 且 需 要 正确 地 对 每 一 个 名 称 和 值 进 行 URI 
编 但 。 尽 管 JavaScript 为 此 提供 了 一 个 便捷 的 消 数 (encodeURIComponent () ), 但 是 格式 化 查询 
字符 串 的 任务 还 是 沙 到 了 我 们 头 上 。 

正如 期 望 的 那样 ，jQuery 预料 到 了 这 个 困难 并 提供 了 一 个 工具 来 窗 化 操作 ,， 即 $.param() 实 
用 函数 。 








函数 语法 : $ .param 
$.param(params, traditional) 
将 传 入 的 信息 序列 化 成 可 在 提交 请 求 中 使 用 的 查 放 i en 
jQuery 包装 集 ， 也 可 以 是 JavaScript 对 象 。 查 询 字 符 串 将 会 被 正确 地 进行 格式 化 ， 并 且 字 符 
串 中 的 每 个 名 称 和 值 都 会 被 正确 地 进行 URI 编码 
params (数组 | jQuery | 对 象 ) 需要 序列 化 为 查询 字符 串 的 值 
如 果 传 入 的 是 元 素数 组 或 者 jQuery 包装 集 ， 则 其 中 包括 的 表单 控件 的 名 称 / 
值 对 会 被 添加 到 查询 字符 串 中 。 如 果 传 入 的 是 一 个 JavaScript 对 象 ， 则 对 象 
的 属性 形成 了 参数 的 名 称 和 值 
traditional (布尔 ) 一 个 可 选 的 标志 ， 强 制 此 函数 按照 jQuery1.4 ee 
列 化 操作 。 这 通常 只 会 影响 有 点 套 对 象 的 源 对 象 " 。 本 节 接 下 来 会 对 此 进 
详细 说 明 
如 有 果 省 略 ， 则 默认 为 false 
返回 值 
格式 化 的 查询 字符 串 


考虑 如 下 语句 : 


$s.paraml(t 
'a thing': 'it&s=value', 
'another thing': 'another value', 
'welird characters':'!@#S% 8&*() +=" 


1 
在 这 里 ,我 们 回 $.param () ee 3 个 属性 的 对 象 ， 其 中 的 名 称 和 值 都 包含 必 
须 进 行 编码 的 字符 以 确保 查询 字符 串 的 有 效 性 。 这 个 柚 数 的 调用 绪 采 是 : 


a+thing=it%26s%3Dvalue&another+thing=another+value 
&weird+characters=!%40%23%24%25%5E%S26*()_%2B%3D 


中 代码 decodeURIComponent ($ .param({a:{b:"c"}}，true) ) 的 执行 结果 是 a=[object+0Object]。 
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注意 , 查询 字符 串 是 如 何 被 正确 格式 化 的 , 名 称 和 值 中 的 非 学 母 顺序 的 字符 是 如 何 被 正确 地 
编码 的 。 对 于 我 们 而 言 , 这 可 能 使 得 学 符 串 不 具有 可 读 性 , 但 是 服务 硕 端 却 依赖 于 这 样 的 字符 串 ! 

注意 事项 : 如 采 传 入 的 元 系数 组 或 者 jQuery 包 波 集 包 含 非 表 单元 素 伸 ， 就 将 会 有 大 量 这 样 
的 条 目 : 

gundefined=undefined 
出 现在 结果 字符 串 中 ， 因 为 这 个 吨 数 不 会 删除 传人 的 参数 中 不 合适 的 元 系 。 

你 可 能 会 想 这 也 没什么 大 不 了 的 , 毕竟 如 果 这 些 值 是 表单 元 素 , 它们 最 终 就 会 被 训 览 需 通 过 
表单 来 提交 ， 那 么 浏览 器 将 会 处 理 所 有 的 细节 。 好 的 ， 抓 紧 你 的 帽子 "。 在 第 8 章 讨论 Ajax 时 ， 
我 们 将 看 到 表单 元 素 并 不 总 是 通过 它们 的 表单 来 提交 ! 

不 过 这 也 不 成 问题 ， 因 为 我 们 随后 将 看 到 jQuery 提供 了 更 加 高 级 的 方法 (该 方法 在 内 部 使 
用 这 个 实用 函数 ) 以 便 用 更 精细 的 方式 来 处 理 这 类 事情 。 

序列 化 藤 套 参数 

受到 多 年 处 理 HTTP 和 HTML 表单 控件 局 限 性 的 影响 ，Web 开发 人 员 习 惯性 地 认为 序列 化 
参数 ( 也 被 称 为 查询 字符 串 ) 是 一 个 名 称 / 值 对 的 单 层 列表 。 

例如 ， 设 想 一 个 收集 用 户 名 和 地 址 的 表单 。 对 于 这 样 的 一 个 表单 ， 查 询 参 数 可 能 包含 诸如 
firstName、lastName 和 city 等 名 称 。 查 询 字 符 串 的 序列 化 版 本 可 能 是 : 


firstName=Yogi&lastName=Bear&streetAddress=123+Anywhere+Lane 
&city=Austin&state=TX&postalCode=78701 


这 个 结构 序列 化 之 前 的 版 本 可 能 是 : 
{ 
firstName: 'Yogi', 


JastName: 'Bear', 
streetAddress: '123 Anywhere Lane', 



































city: 'Austin', 

state: 'TX', 

postalCode : '78701' 
} 


作为 一 个 对 象 ,， 它 并 不 真正 代表 我 们 所 知 的 数据 呈现 方式 。 从 数据 组 织 的 角度 来 看 ,我 们 可 
能 认为 这 个 数据 由 两 个 主要 元 系 组 成 , 一 个 是 名 称 ， 为 一 个 是 地 址 , 每 一 个 都 包含 它们 日 己 的 属 
性 。 代 码 可 能 像 下 面 这 样 : 


{ 


name: { 

















first: 'Yogi', 
last: 'Bear' 
}, 
address: { 
street: '123 Anywhere Lane', 
city: 'Austin’', 
state: 'TX', 


思 是 稳 住 了 ， 后 面 介 绍 的 内 容 会 彻底 粉 肆 之 前 你 的 设想 。 


中 意 
Q 这 个 方法 指 的 是 serialize() 方 法 ， 用 来 从 一 组 表单 元 素 返 回 名 称 / 值 对 组 成 的 查询 字符 串 。 
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postalCode : '78701' 


} 
} 








但 是 元 素 的 这 个 其 侄 版 本 , 虽然 比 单 层 的 版 本 更 加 符合 近 辑 结构 , 但 却 不 容易 转化 为 查询 子 





或 者 也 很 容易 ? 

通过 使 用 约定 俗 成 的 方 插 号 表示 法 ， 这 样 的 结构 可 以 用 如 下 形式 来 表示 : 

name [first]=Yogi&name[last]=Bear&address[street]=123+Anywhere+Lane 
&address[city]=Austin&address[state]=TX&address [postalCode]=78701 











在 这 个 表示 法 中 , 子 属性 使 用 方 括号 来 表示 以 保持 与 结构 的 联系 。 很 多 服务 表 站 框 淋 如 RoR 


(Ruby on Rails 


) 和 PHP， 可 以 很 方便 地 解码 这 些 字 从 串 。Java 没有 原生 的 功能 来 从 这 种 表示 法 


中 重 构 般 套 对 象 ， 但 是 创建 这 样 的 处 理 需 很 容易 。 
这 是 jQuery1.4 的 一 个 新 行为 一 一 当 问 老 版 本 jQuery 的 $ .param() 限 数 传递 项 套 结 构 时 ， 不 
会 产生 任何 有 意义 的 结果 。 如 果 和 希望 $.param() 使 用 老 版 本 的 行为 ， 就 应 该 设置 traditional 


参数 为 true。 


,9 可 以 在 文件 chapter6/lab.$.param.html 提供 的 $.param() 实验 室 页面 中 目 行 验证 上 述 行为 , 如 





氏 6-4 所 示 。 
人 MA 
| JJjQuery in Action, 2nd Editior %) | | $.param0 Lab “x 
ce》 0 全 六 http:/ /localhost/ijqia2 /chapter6 /lab.$ .param.html BE 口 > A" 





$.param() Lab 


| 


@ Flat source: OO Nested source: 
{ { 
firstName: ‘Yogi', name: 1{ 
lastName: "Bear', first: Yogi’, 
streetAddress: "123 Anywhere Lane', last: "Bear' 
citys: ‘Austin', . 
state: "TX', address: 1 
postalCode : “78701” street: '123 Anywhere Lane', 


city: "Austin’, 
state: TX, 
postalCode : "78701°" 


Mi Traditional 


Apply | 





图 6-4 





可 以 在 $ .param() 实 验 室 观 察 如 何 使 用 新 的 和 传统 的 算法 来 序列 化 单 层 的 和 骸 
套 的 对 象 


这 个 实验 室 人 允许 我 们 观察 $.param() 是 如 何 使 用 新 算法 以 及 传统 算法 来 序列 化 单 层 的 和 藤 


僚 的 对 象 。 
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MM 继续 在 这 个 实验 室 页 面 上 练习 , 直到 你 熟悉 这 个 函数 的 行为 为 止 。 我 们 强烈 建议 你 复制 一 份 
这 个 页 面 来 练习 各 种 你 希望 序列 化 的 对 象 结 构 。 


6.3.8 测试 对 象 


你 可 能 已 经 注意 到 很 多 jQuery 包装 融 方 法 和 实用 冰 数 都 有 可 伸缩 的 参数 列表 ， 可 以 忽略 可 
选 的 参数 ， 无 需 使 用 null 值 作为 占 位 符 。 

以 bina() 包 友善 方法 为 例 ， 它 的 冰 数 签名 是 : 

bind (event,data,handler) 

但 是 如 有 果 没 有 传 入 事件 的 数据 ， 我 们 可 以 人 简单 地 将 处 理 副 函数 作为 第 二 个 参数 来 调用 
bind()。jQuery 通过 测试 参数 的 类 型 来 处 理 这 种 情况 ， 如 果 它 发 现 只 有 两 个 参数 ， 并 且 第 二 个 
参数 是 个 果 数 ， 就 会 把 第 二 个 参数 解释 为 处 理 需 而 不 是 数据 参数 。 

如 果 和 希望 创建 同样 友好 和 通用 的 函数 和 方法 , 那么 测试 参数 的 各 种 类 型 ( 包括 它们 是 否 为 函 
数 ) 就 肯定 会 派 上 用 场 ， 因 此 jQuery 公开 了 一 些 用 于 测试 的 实用 函数 ， 如 表 6-4 所 列 。 


表 6-4 jQuery 为 测试 对 象 提供 的 实用 函数 

















函 数 掏  ” 述 
$.isArray(o) 如 果 o 是 JavaScript 效 组 , 则 返回 true( 如果 o 是 任意 其 他 类 似 数组 的 对 象 例如 jQuery 

包装 集 ， 则 返回 false ) 

$s .isEmptyObject (o) 如 果 o 是 不 包含 属性 的 JavaScript 对 象 ， 则 返回 true， 这 里 指 的 属性 包括 任何 从 
prototype 继 承 下 来 的 属性 " 

$.isFunction (o) 如 果 o 是 JavaScript 函 数 , 则 返回 true。 警告 : 在 正 浏览 器 中 ,内置 的 函数 例如 alert () 
和 confirm() 以 及 元 素 方 法 都 不 能 被 正确 报告 为 多 数 

sisplainObject (6) 如 果 o 是 一 个 通过 {} 或 者 new Object () 创 建 的 JavaScript 对 象 ， 则 返回 true 

$ .isXMLDoc (node) 如 果 node 是 XML 文 档 ,， 或 者 是 XML 文 档 里 的 节点 ， 则 返回 true 


下 面 来 看 一 些 不 能 归 入 任何 分 类 的 实用 孔 数 。 


6.4 ”其 他 实用 函数 


本 万 将 探索 一 组 实用 函数 , 其 中 的 每 一 个 都 可 以 定义 其 目 己 的 分 类 。 先 从 一 个 看 起 来 好 像 什 
么 部 不 做 的 函数 开始 。 


6.4.1 什么 都 不 做 


jQuery 定义 了 一 个 什么 都 不 做 的 实用 吗 数 。 本 可 以 将 这 个 孙 数 命名 为 $.wastingAway- 
AgainInMargaritaville()， 但 是 这 个 名 称 有 点 长 所 以 才 命 名 为 8.noop () 。 语 法 如 下 所 示 。 








中 例如 function F () {} F.prototype.name = "test"; 则 S$.isEmptyObject (new F()) 返 回 false。 
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函数 语法 : $ .noop 
$ .noop() 
什么 都 不 做 
参数 





噶 ， 一 个 不 需要 参数 、 什 么 都 不 做 并 且 什 么 都 不 返回 的 函数 。 有 什么 作用 呢 ? 
还 记得 有 多 少 个 jQuery 方法 需要 传人 可 选 的 回调 函数 作为 参数 或 者 选项 值 吗 ? $.noop () 就 
征 在 用 户 没 有 提供 回调 函数 时 作为 其 移 认 值 用 的 。 


6.4.2 ”测试 包含 关系 


当 硕 望 测试 一 个 元 素 是 否 包 含 在 另 一 个 元 素 内 部 时 , 可 以 使 用 jQuery 提供 的 $.contains () 
实用 滑 数 。 








函数 语法 : $ .contains 
$.contains (container, containee) 
测试 一 个 元 素 是 否 在 DOM 层次 结构 中 包含 在 另 一 个 元 素 内 部 
contairer (元 素 ) 要 测试 的 包含 另 一 个 元 素 的 DOM 元 素 
containee (元 素 ) 要 测试 的 被 包含 的 DOM 元 素 
返回 值 


如 果 containee 包含 在 container 内 部 就 返回 true， 否 则 返回 false 














虽 ， 等 一 下 ! 这 听 起 来 是 不 是 很 熟悉 ?的 确 是 这 样 ， 我 们 曾 在 第 2 章 讨论 过 has () 方 法 与 这 
个 函数 有 惊人 的 相似 之 处 。 

当 我 们 已 经 拿 到 要 测试 的 DOM 元 系 的 引用 并 且 不 需要 创建 包装 集 时 , 这 个 经 常 在 jQuery 内 
部 使 用 函数 会 非常 有 用 。 

下 面 来 看 看 太一 个 和 其 相应 的 包 竣 融 方 法 非常 相似 的 因数 。 


6.4.3 ”附加 效 据 到 元 素 上 


回 到 第 3 章 ， 我 们 曾 考察 了 aata() 方 法 ， 它 允许 我 们 将 数据 赋值 给 DOM 元 素 。 对 于 已 经 
获取 了 DOM 元 系 引 用 的 情况 ， 可 以 使 用 底层 的 实用 也 数 $.qata() 来 执行 相同 的 操作 。 
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函数 语法 : $.data 


S .data (elLement ，Dname，ValLue) 


使 用 指定 的 名 称 在 传 入 的 元 素 上 存储 或 者 检索 数据 


参数 
element (元 素 ) 用 于 存储 数据 的 或 者 从 中 检索 数据 的 DOM 元 素 
name (字符 串 ) 与 数据 相关 联 的 名 称 


value ( 对象 ) 将 要 被 赋值 给 指定 名 称 的 元 素 的 数据 。 如 果 省 略 ， 则 获取 指定 名 称 的 数据 
返回 值 
存储 或 者 获取 的 数据 值 


正如 所 料 ， 也 可 以 通过 一 个 实用 上 顺 数 来 删除 数据 。 
函数 语法 : $ .removeData 


$.removeData (element, name) 


删除 存储 在 传 入 的 元 素 上 的 数据 


参数 

element (元 素 ) 将 要 从 中 删除 数据 的 DOM 元 素 

name (字符 串 ) 将 要 删除 的 数据 项 的 名 称 。 如 果 省 略 ， 则 将 删除 所 有 存储 的 数据 
返回 值 

无 





现在 把 注意 力 转移 到 一 个 更 加 深奥 的 实用 函数 一 一 显著 影响 事件 监听 器 调用 方式 的 函数 。 
6.4.4 预 绑 定 函数 上 下 文 


正如 在 研究 jQuery 的 过 程 中 看 到 的 ， 函 数 和 其 上 下 文 在 使 用 了 jQuery 的 代码 中 扮演 着 重要 
角色 。 在 随后 关于 Ajax (第 8 章 ) 以 及 jQuery UI (第 9 章 到 第 11 章 ) 的 几 章 中 ， 我 们 将 会 更 加 
深入 探讨 函数 ， 尤 其 是 在 把 它们 当 作 回调 也 数 使 用 的 时 候 。 

为 数 的 上 下 文 (this 指 癌 的 对 象 ) 取决 于 孙 数 是 如 何 被 调用 的 ( 如 采 想 复习 这 个 概念 ， 请 
参见 附录 )。 当 我 们 想 调 用 特定 的 函数 并 且 显 式 地 控制 函数 的 上 下 文 时 ， 可 以 使 用 
Function.call() 方 法 来 调用 这 个 函数 。 

但 是 如 果 我 们 不 是 函数 的 调用 者 , 该 怎么 办 呢 ?” 例 如 ， 如果 这 个 函数 是 一 个 回调 函数 ,该 如 
何 处 理 ? 在 这 种 情况 下 ， 我 们 不 是 函数 的 调用 者 ， 因 此 不 能 使 用 Function.cal1l() 来 影响 果 数 
的 上 下 文 设置 。 

我 们 可 以 通过 jQuery 提供 的 一 个 实用 函数 为 函数 预 绑 定 对 象 ， 这 样 一 来 当 调 用 函数 时 ， 绑 
定 的 对 象 就 成 为 了 函数 的 上 下 文 。 这 个 实用 肯 数 名 为 $.proxy() ， 语 法 如 下 所 示 。 
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函数 语法 : $ .proxy 
$ .proxy (function, proxy) 
$ .proxy (proxy, property) 
使 用 预 绑 定 的 代理 对 象 创建 函数 的 一 个 副本 ,在 函数 作为 回调 函数 被 调用 时 ,此 对 象 作为 函数 
1 下 了 


参数 
function (函数 ) 将 要 使 用 代理 对 象 来 预 绑 定 的 函数 
proxy ( 对象 ) 将 要 绑 定 为 代理 函数 上 下 文 的 对 象 


property (字符 串 ) 传 入 的 proxy 对 象 的 属性 名 称 ， 包 含 将 要 绑 定 的 函数 
返回 值 
使 用 代理 对 象 来 预 绑 定 的 新 函数 


打开 位 于 文件 chapter6/$.proxy.html 中 的 示例 。 你 将 会 看 到 如 图 6-5 所 示 的 结果 。 


人 A 


和 他 已 全 Ts http://localhost/jqia2/chapter61$.proxy.html EL 口 > A- 


1 5$.proxy0 Example k 十 








$.proxy() Example 
Establish handler as: @ Normal OO Proxied 


Test | 








图 6-5 $.proxy 示例 页 面 玫 助 我 们 观察 普通 的 回调 函数 和 代理 的 回调 函数 之 间 的 差异 





在 这 个 示例 页 面 中 ，Test 按钮 被 创建 于 id 值 为 buttonContainet 的 <div> 元 素 内 。 当 单 击 
Normal 单 选 按 钮 时 ， 在 该 按钮 和 它 的 容 右 上 创建 单 击 处 理 带 ， 如 下 所 示 : 


$('#testButton,#buttonContainer') .click!l 
ET SO .| 

); 

当 单 击 按钮 时 ,我们 硕 望 在 该 按钮 上 调用 创建 的 处 理 融 ,并 且 由 于 事件 冒 泡 ,也 将 在 该 按钮 

的 父 容 硕 上 调用 处 理 融 。 在 所 有 情况 下 , 调用 函数 的 上 下 文 都 应 该 是 在 其 之 上 创建 处 理 硕 的 元 素 。 
在 处 理 带 ( 用 来 输出 函数 上 下 文 的 ia 属性 ) 中 调用 say(this.ig) 的 结 采 显示 的 一 切 和 都 和 

预期 的 一 样 一 一 参见 图 6-6 的 上 半 部 分 。 处 理 需 被 调用 了 两 次 : 第 一 次 是 在 按钮 上 ， 第 二 次 是 在 

容 船 上， 同时 每 个 元 素 被 分 别 设置 为 吨 数 的 上 下 文 。 
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全 站 站 
La 


丰富 CG 省 鹤 http://localhost/jqia2/chapter615$.proxy.html p Dr -~ 








) [| $.proxy0 Example 


$.proxy() Example 


Establish handler as: @ Normal O 〇 Proxied 


Test 0 | 
At 17:44:15.591 - testButton 


At 17:44:16.593 - buttonContainer 


MMO 一 
| ]$.proxy0 Example x Yi 


fA > CC 省 http:/ /localhost/jqia2 /chapter6/$.proxy.html p DA£- 


$.proxy() Example 


Establish handler as: OO Normal @ Proxied 


Test | | 
At 17:45:45:205 <- controlPanel 


At 17:45:46.206 - ControlPanel 








图 6-6 ”这 个 示例 显示 了 为 Test 按钮 的 单 击 处 理 需 预 绑 定 对 象 的 效果 
然而 ， 当 Proxied 单 选 按钮 被 选中 时 ， 创 建 处 理 需 的 方式 如 下 : 


Ss('#testButton,#buttonContainer').click!l 
Ss.proxy (function(){ say(this.id); }, $('#¥controlPanel')[0]) 
) ; 


这 创建 了 与 之 前 相同 的 处 理 器 , 不 同 之 处 在 于 将 处 理 絮 也 数 传人 $ .proxy () 实 用 也 数 中 , 同 
时 预 绑 定 了 一 个 对 象 到 该 处 理 需 。 

在 这 个 例子 中 ， 我 们 绑 定 了 :ia 为 controlPanel 的 元 素 。 绑 定 的 对 象 也 可 以 不 是 元 素 一 一 
事实 上 大 部 分 情况 下 它 不 是 元 素 。 之 所 以 在 本 例 中 这 人 么 做 ， 是 因为 可 以 很 容易 地 通过 ia 但 来 找 
到 该 对 象 。 

现在 单 击 Test 按 钮 ， 所 看 到 的 结果 如 图 6-6 下 半 部 分 所 示 ， 哨 数 上 下 文 已 经 被 强制 设置 为 通 
过 $ .proxy () 绑 定 到 处 理 右 的 对 象 。 

当 癌 回调 活 ee es 其 他 方式 来 访问 时 ， 这 个 功能 非常 有 用 。 














$ .proxy () 的 一 稼 见 的 用 途 是 将 对 象 的 方法 绑 定 为 处 理 融 ， es 方法 的 对 象 作为 
人 ne 考虑 如 下 的 对 象 : 
Var oO = { 
ijd: 'oO', 


hello: function() { alert ("Hi there! I'm " + this.1id); } 
J 
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如 果 通 过 o.hello() 来 调用 pello() 方 法 ,那么 孔 数 上 下 文 (this ) 将 是 o。 但 是 如 果 将 
此 函数 作为 处 理 器 ， 如 下 所 示 : 

$s (whatever) .click(o.hello).; 
就 会 发 现 孔 数 的 上 下 文 是 当前 冒 泡 的 元 率 ， 而 不 是 o。 如 果 处 理 融 依 赖 于 o， 那 就 惨 了 。 

可 以 使 用 $ .proxy () 来 强制 设置 函数 上 下 文 为 o， 以 下 两 个 语句 都 可 以 实现 : 

$ (whatever) .click($.proxy (0o.hello,o)); 
或 者 

$ (whatever) .click($.proxy (0o, 'hello')); 

注意 ， 这 么 做 意味 着 你 将 无 法 知道 事件 传播 过 程 中 当前 的 冒 泡 元 素 一 一 这 个 值 通常 被 设置 
为 图 数 的 上 下 文 。 


6.4.5 解析 JSON 


JSON 已 经 迅速 地 成 为 互联 网 的 宠儿 ， 似 乎 要 将 看 似 尝 拙 的 XML 推 下 数据 交换 的 宝座 。 由 
于 大 部 分 的 JSON 也 是 有 效 的 JavaScript 表达 式 语 法 ， 于 是 JavaScript 的 eval () 函数 早 就 被 用 来 
将 JSON 字符 串 转 换 为 等 价 的 JavaScript 对 象 。 

现代 浏览 器 提供 了 zsoN.parse() 来 解析 JSON， 但 是 并 非 每 个 开发 者 都 能 奢望 他 们 的 所 有 
用 户 都 在 使 用 最 新 的 浏览 祷 。jQuery 深 知 这 一 点 ， 为 此 提供 了 $ .parseJSON() 实 用 也 数 。 


























函数 语法 : $ .parseJSON 
$ .parseJSON (json) 
解析 传 入 的 JSON 字符 串 ， 返 回 其 计算 值 
参数 
json (字符 串 ) 将 要 解析 的 JSON 字符 串 
返回 值 
JSON 字符 串 的 计算 值 


如 条 浏览 需 文 持 JSoON.parse() , jQuery 就 会 使 用 此 因数 。 否 则 ,jQuery 会 使 用 一 个 JavaScript 
技巧 来 进行 求 值 。 

记 住 , JSON 字符 串 必 须 是 完全 良好 格式 的 , 并 且 良 好 格式 的 JSON 规则 比 JavaScript 表 达 式 
语法 的 规则 更 加 严格 。 例 如 所 有 的 属性 名 称 必须 由 双 引 号 学 符 来 分 隐 , 即使 它们 是 有 歼 的 标识 符 。 
而 且 必 须 是 双 引 号 字符 一 一 单 引号 字符 不 能 用 来 分 隔 属性 。 无 效 的 JSON 将 导致 抛 出 错误 。 请 参 
阅 http:/www.json.org/ 来 了 解 有 关 民 好 格式 化 JSON 的 详细 信息 。 

说 到 求 值 …… 

















OQ 其实 还 是 有 办 法 的 ， 设置 hello () 的 第 一 个 参数 为 event， 则 event .currentTarget 就 是 当前 冒 泡 的 元 素 。 
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6.4.6 ”表达 式 求 值 


虽然 使 用 eval () 会 被 一 些 互联 网 达 人 嘲笑 ， 但 是 有 时 候 它 却 非 常 管用 。 
eval () 是 在 当前 上 下 文中 执行 的 。 当 编写 插件 或 者 其 他 可 重用 的 脚本 时 , 我 们 可 能 希望 确保 
求 值 的 过 程 总 是 在 全 局 上 下 文中 进行 。 这 时 候 可 以 借助 于 $s .globalEval () 实 用 因数 。 








浮 数 语法 : $ .globalEval 
$ .globalEval (code) 
在 全 局 上 下 文中 对 传 入 的 JavaScript 代码 进行 来 值 
参数 
code (字符 串 ) 将 要 进行 来 值 的 JavaScript 代码 
返回 值 
JavaScript 代码 的 计算 值 


下 面 以 一 个 可 以 为 页 面 动态 加 载 脚本 的 函数 来 结束 对 实用 函数 的 考察 。 


6.4.7 ”动态 加 载 脚 本 


大 多 数 时候 ， 当 页 面 加 载 时 我 们 通过 页 面 <heaq> 中 的 <script> 标 签 来 从 脚本 文件 中 加 载 页 
面 所 需 的 外 部 脚本 。 但 有 时 候 ， 我 们 可 能 希望 事后 在 脚本 控制 下 动态 加 载 脚本 。 

我 们 可 能 会 这 么 做 ,因为 只 有 在 特定 的 用 户 活 动 发 生 时 ,我 们 才 知 道 需要 某 个 脚本 , 并且 除 
非 绝对 必要 也 不 想 包含 那个 脚本 。 也 可 能 因为 需要 使 用 页 面 加 载 时 尚 不 可 用 的 信息 来 在 不 同 的 脚 
本 之 间 进 行 有 条 件 的 选择 。 

无 论 是 出 于 什么 原因 要 在 页 面 上 动态 加 载 脚本 ，jQuery 都 提供 了 $ .getscript () 实 用 哺 数 
来 简化 操作 。 
































浮 数 语法 : $.getScript 
$.getScript (url, callback) 
通过 向 指定 的 服务 器 发 起 GET 请 求 来 获取 由 url 参数 指定 的 脚本 ， 在 请 求 成 功 后 ( 可 选 地 ) 
调用 回调 函数 


url (字符 串 ) 需要 获取 的 脚本 文件 的 URL。URL 不 局 限于 和 容器 页 面相 同 的 域名 的 地 址 


callback (函数 ) 一 个 可 选 的 函数 ,在 脚本 资源 加 载 并 且 求 值 完毕 后 调用 ， 参数 为 :从 资 
源 中 加 载 的 文本 信息 ， 以 及 一 个 文本 的 状态 消息 : 如 果 所 有 过 程 都 顺利 进行 ， 则 
为 “success” 

返回 值 

用 来 获取 脚本 的 XMLHttpRequest (XML HTTP 请 来 ) 实例 
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在 其 内 部 ， 这 个 函数 使 用 jQuery 内 置 的 Ajax 机 制 来 获取 脚本 文件 "。 第 8 章 详 细 曾 述 这 些 
Ajax 功能 ， 但 是 不 需要 任何 Ajax 的 知识 就 能 使 用 这 个 阴 数 。 


获取 文件 后 ,将 会 对 文件 中 的 脚本 进行 求 值 ,执行 所 有 内 联 脚本 , 并且 任何 已 定义 的 变量 或 





者 图 数 神 会 变 得 可 用 。 


警告 0 Safar20000000000000000000000000000000000 
UDOD0DODU00O000000U000000000000000U0D0UU0UUUD 
D000000000000000000000000 Sargd0g00000000° 0 


下 面 来 实践 一 下 。 考 虑 如 下 脚本 文件 ( 可 从 chapter6/new.stuffjs 获取 ): 


alert("I'm inline!").; 
Var someVariable = 


'Value of someVariable'.: 
function someFunction(value) { 


alert (value); 


}; 


这 个 小 的 脚本 文件 包含 内 联 语 句 ( 用 来 弹出 一 个 警告 对 话 框 ， 表 明 语句 何 时 执行 )、 变 量 声 
明 以 及 函数 声明 ， 当 执行 此 函数 时 会 弹出 包含 所 有 传人 的 值 的 警告 对 话 框 。 现 在 来 写 一 个 页 面 动 
[SN I 


态 地 包含 这 个 脚本 文件 , 该 页 面 的 代码 如 代码 清单 6-2 所 示 , 可 以 在 文件 chapter6/$.getScript.html 
中 找到 。 


代码 清单 6-2 ”动态 加 载 脚 本 文件 并 检查 结 
<IDOCTYPE html> 
<html> 


<head> 
<title>s .getScript() 


Example</title> 
<link rel="stylesheet" 


type="text/css" href="../styles/core.css" /> 
<script type="text/javascript" src="../scripts/jaquery-1.4.js"></script> 
<script type="text/javascript" 
src="../scripts/jgqia2.support.js"></script> 
<script type="text/javascript"> 


(funetion( yr -9 单 击 Load 按钮 时 获取 脚本 
Ss('#loadButton') .click (function()t 
S .getScript!l! 
'new.stuff.js,' 
//,function() {S$('#inspectButton') .click()} 
}) | 9 单 击 Inspect 按钮 时 显示 结果 
$S('#inspectButton') .click(function()t 


someFunction (someVariable):; 


}); 
}); 





QD 跨 域 的 脚本 文件 不 是 通过 Ajax 获取 的 ， 而 是 通过 问 <head> 添 加 <script> 标 签 来 加 载 的 ， 详 见 译 者 博客 
http://www.cnblogs.com/sanshi/archive/2011/03/02/1969224.html。 
@) 比如 通过 setTimeout 来 延迟 执行 后 续 的 脚本 。 
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</script> 
<}jhead» 9 包含 测试 按钮 
<body> 


<button type="button" id="loadButton">Load</button> 
<button type="button" id="inspectButton">Inspect</button> 
</body> 
</html> 


这 个 页 面 定义 了 两 个 用 来 触发 示例 中 的 活动 的 按钮 全 。 第 一 个 按钮 的 标签 是 Load， 该 按钮 
会 导致 使 用 $ .getscript () 国 数 来 动态 地 加 载 new.stuffjs 文件 @, 注意 , 起 初 第 二 个 参数 ( 回调 
国 数 ) 是 被 注释 掉 的 一 一 我 们 蕊 上 就 会 探讨 这 方面 的 内 容 。 

单 击 Load 按钮 时 会 加 载 new.stuffjs 文件 ， 并 对 其 内 容 进行 求 值 。 不 出 所 料 ， 脚 本 文件 中 的 
内 联 语 句 触 发 了 一 条 警告 消息 ， 如 图 6-7 所 示 。 





AOO S$.getScript0 Example 
Ly we © nttp://localhost/jqia2/chapter6/$.getScript.html 
| The page at http:/ /localhost says: 

pm inline! 





图 6-7 ”动态 地 加 载 并 执行 脚本 文件 ， 导 致 内 联 的 警告 对 话 框 语句 被 执行 


单 击 Inspect 按 钮 后 会 执行 其 click 人 处理 器 @ ,该 处 理 器 会 执行 动态 加 载 的 someFunction () 
国 数 ， 并 回 此 困 数 传递 动态 加 载 的 someVariable 变量 的 值 。 如 果 警 告 对 话 框 如 网 6-8 所 示 ， 我 
们 就 知道 变量 和 函数 都 已 经 被 正确 加 载 了 。 


人 $.getScript0 Example (= 








多 人 | x © nttp:/ /localhost/jqia2/chapter6/5$.getScript.html ” 


| The page at http:/ /localhost says: 


(AN Value of someVariable 








图 6-8 警告 对 话 框 的 出 现 表 明 动 态 加 载 图 数 成 功 ， 而 显示 内 容 正 确 表明 变量 已 经 被 动 
态 地 加 载 
如 果 你 仍然 运行 Safari2 或 者 更 早 版 本 的 浏览 融 (日 前 看 来 已 经 非常 过 时 ), 并 且 和 希望 观察 我 
们 之 前 曾经 提醒 过 你 的 Safari 早期 版 本 的 行为 ,那么 可 以 复制 一 份 图 6-8 所 示 页 面 的 HTML 文件 ， 
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并 取消 其 中 对 $.getscript() 国 数 中 回调 参数 的 注释 。 这 个 回调 会 执行 mspect 按钮 的 click 处 
理 锅 ， 将 加 载 的 变量 作为 参数 来 调用 动态 加 载 的 吨 数 。 

在 非 Safari 2 的 浏览 右 中 ， 从 脚本 中 动态 加 载 的 函数 和 变量 在 回调 函数 中 是 可 用 的 。 但 是 在 
Safari 2 中 执行 时 ， 什 么 也 没有 发 生 ! 当 在 Safari 较 早 版 本 的 浏览 器 中 使 用 $s .getscript () 函数 
时 ， 我 们 需要 留意 这 种 功能 上 的 分 歧 。 





6.5 小结 


在 本 曹 中 ， 我 们 考察 了 除 操作 由 匹配 DOM 元 系 组 成 的 包 污 集 的 方法 外 ，jQuery 提供 的 一 些 
特征 。 它们 包括 各 种 各 样 的 函数 , 以 及 一 组 直接 定义 在 jQuery 顶级 名 称 ( 以 及 别名 $ ) 上 的 标志 。 

我 们 看 到 jQuery 如 何 通 过 $ . support 对 象 上 的 各 种 标志 来 告诉 我 们 当前 浏览 硕 的 功能 。 当 需 
要 求助 于 浏 顺 旨 检 测 来 了 解 $ .support 无 法 提供 的 、 浏 览 硕 在 功能 和 运行 上 的 差异 时 ,$.prowser 
提供 的 一 组 标志 能 够 帮助 我 们 确定 当前 显示 页 面 的 浏览 硕 家 族 。 当 不 可 能 按照 独立 于 浏览 规 的 方式 
编写 代码 时 ， 并 且 痛 选 的 特征 检测 方法 行 不 通 时 ， 才 应 该 考虑 浏览 右 检 测 这 个 最 后 的 手段 。 

jQuery 认识 到 网 页 开发 者 有 时 可 能 需要 同时 使 用 jQuery 和 其 他 库 ， 为 此 提供 了 
s.noconflict() 用 来 允许 其 他 库 使 用 $ 别 名 。 在 调用 此 吨 数 后 ， 所 有 的 jQuery 操作 必须 使 用 
jQuery 名 称 而 不 能 使 用 $。 

$s .trim() 的 存在 是 为 了 填补 原生 JavaScript 的 String 类 的 一 个 空 日 ， 它 用 来 修剪 字符 溃 开 
始 和 结尾 处 的 空 日 字符。 

jQuery 也 提供 了 一 组 非常 有 用 的 函数 用 来 操作 数组 中 数据 集 。s$ .array () 可 以 很 方便 地 遍历 数 
组 中 的 每 一 项 。$ .grep () 允许 我 们 使 用 任何 猎 选 条 件 来 响 选 源 数 组 中 的 数据 , 从 而 创建 新 的 数组 。 
$ .map () 允许 我 们 在 源 数组 上 轻松 使 用 自 定 义 的 转换 困 数 ， 从 而 产生 包含 转换 后 的 值 的 新 数组 。 

我 们 可 以 使 用 $s.makeArray() 将 NodeList 实例 转换 为 JavaScript 数组 ， 可 以 使 用 
$s .inArray () 来 测试 一 个 值 是 否 在 数组 中 ， 其 至 可 以 通过 $s .isArray () 来 测试 某 个 值 是 否 是 数 
组 ， 也 可 以 使 用 $ .isFunction() 来 测试 一 个 值 是 否 为 函数 。 

我 们 也 看 到 了 jQuery 是 如 何 通 过 $ .param() 来 创建 正确 格式 化 和 编码 的 查询 字符 串 。 

jQuery 提供 了 $ .extend() 卫 数 用 来 合并 对 象 ， 其 至 可 以 用 来 模拟 某 种 继承 架构 。 这 个 也 数 
可 以 将 多 个 源 对 象 的 属性 合并 到 目标 对 和 象 中 。 

我 们 也 看 到 了 很 多 用 来 测试 对 象 是 否 为 咽 数 、JavaScript 对 象 ， 甚 至 是 否 为 空 对 象 的 男 数 一 一 
这 在 许多 情况 下 都 很 有 用， 特别 是 在 检查 变量 参数 列表 的 时 候 。 

$.proxy() 方 法 用 来 预 绑 定 一 个 对 象 ， 随 后 用 于 事件 处 理 融 调用 的 困 数 上 下 文 ，$.noop () 
国 数 什么 也 不 做 。 

当 我 们 需要 动态 加 载 脚本 文件 的 时 候 ， 可 以 使 用 jQuery 定义 的 $.getSscript() 来 在 页 面 生 
命 周期 的 任何 时 候 加 载 和 执行 脚本 文件 ， 甚 至 是 在 页 面 所 在 域 之 外 其 他 域 的 脚本 。 

有 了 这 些 附加 工具 在 手 ， 我 们 就 能 为 jQuery 添加 日 定义 扩展 。 我 们 将 在 下 一 章 中 学 习 这 方 
面 的 内 容 。 
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扩展 jQuery 


本 章 内 容 

口 为 什么 要 使 用 自 定 义 代 码 来 扩展 jQuery 
口 有 效 扩 展 jQuery 的 准则 

口 编写 自 定 义 的 实用 函数 

口 编写 目 定 义 的 包装 旭 方 法 


在 前 面 几 章 中 ,我 们 看 到 jQuery 提供 了 一 个 包含 了 有 用 方法 和 消 数 的 庞大 工具 箱 ， 我 们 可 以 
很 容易 地 组 合 使 用 这 些 工 具 来 为 页 面 添 加 任何 选 定 的 行为 。 有 时 我 们 需要 代码 遵循 重复 使 用 的 第 
用 模式 。 当 这 种 模式 出 现时 ， 捕 捉 这 些 重 复 的 操作 来 创建 可 重用 的 工具 是 有 意义 的 ， 可 以 将 其 添 
加 到 原始 的 工具 箱 中 。 本 章 中 ， 我 们 将 探讨 如 何 捕 捉 这 些 可 重用 的 代码 片段 并 实现 jQuery 扩展。 
不 过 在 此 之 前 ， 首 先 来 讨论 下 为 什么 要 将 代码 模式 化 以 便 将 其 实现 为 jQuery 扩展 。 


7.1 为 什么 要 扩展 jQuery 


如 果 在 通读 本 书 时 留心 观察 , 并 且 已 经 审查 了 其 中 的 代码 示例 , 那 你 肯定 会 注意 到 在 页 面 中 
采用 jQuery 对 编写 脚本 的 方式 有 痢 深 刻 的 影响 。 

jQuery 提倡 一 种 编写 页 面 代 但 的 风格 : 通 律 是 形成 元 素 的 包装 集 然 后 应 用 jQuery 方法 ,或 
者 为 该 集合 应 用 方法 链 。 当 编写 代码 时 ,我 们 可 以 根据 个 人 喜好 随意 而 为 ,但 有 经 验 的 开发 者 都 
赞同 ,使 网 站 上 的 所 有 代码 或 者 至 少 是 绝 大 多 数 代码 保持 一 致 的 风格 是 良好 的 做 法 。 

因此 将 代码 模式 化 来 实现 为 jQuery 扩展 的 一 个 很 好 的 理由 是 ， 为 了 帮助 整个 网 站 保持 一 致 
的 代码 风格 。 

理由 不 够 充分 ? 还 需要 更 多 的 理由 ?jQuery 的 全 部 要 点 是 提供 一 套 可 重用 的 工具 和 API。 
jQuery 的 创建 者 精心 策划 了 库 的 设计 和 如 何 布置 工具 来 提升 可 重用 性 的 理念 。 通过 遵循 这 些 工 具 
的 设计 先例 , 目 然 就 能 从 这 些 设计 中 获得 规划 的 好 处 一 一 这 是 将 代码 实现 为 jQuery 扩展 的 有 说 服 
力 的 第 二 个 理由 。 

还 是 不 能 令 人 信服 ?我 们 考 卡 的 最 后 一 个 理由 (虽然 可 能 其 他 人 可 以 列 出 更 多 的 理由 ) 是 ， 
通过 扩展 jQuery, 束 可 以 利用 jQuery 提供 的 现 有 代码 基础 。 例如, 通过 创建 新 的 jQuery 方法 ( 包 
疙 旭 方 法 ), 我 们 自动 继承 了 jQuery 强大 的 选择 絮 机 制 。 当 可 以 依 徘 jQuery 已 经 提供 的 强大 工具 
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的 时 候 为 什么 还 要 从 头 开 始 编写 所 有 代码 呢 ? 

综 上 所 述 ， 将 可 重用 的 组 件 实现 为 jQuery 扩展 是 一 个 很 好 的 做 法 和 聪明 的 工作 方式 。 在 本 
草 的 其 余部 分 ， 我 们 将 研究 允许 创建 jQuery 插件 的 准则 和 模式 ， 并 会 创建 一 些 jQuery 插件 。 第 
8 章 会 包含 一 个 完全 不 同 的 主题 ( Ajax ), 我 们 将 看 到 更 多 的 证 据 , 可 以 证 明 在 现实 世界 中 把 可 重 
用 的 组 件 实现 为 jQuery 插件 有 助 于 保持 代码 的 一 致 性 ， 并 且 使 得 从 一 开始 编写 这 些 组件 变 得 更 
加 容易 。 

不 过 先 来 看 下 开发 指南 …… 


7.2 jQuery 插件 开发 指南 


标志 ! 标志 ! 到 处 都 是 标志 ! 

阻隔 了 风景 ， 破 坏 了 心情 。 

这 么 做 ! 不 要 那么 做 ! 难道 你 看 不 懂 标 志 吗 ? 

一 一 五 人 电子 乐队 ( Five Man Electric Band )，1971 

尽管 五 人 电子 乐队 在 1971 年 狂热 地 宣称 了 反对 正统 流派 的 立场 , 但 是 有 时 规则 是 一 件 好 事 。 
不 以 规矩 ， 不 成 方圆 。 

此 jQuery 插件 开发 需要 有 规则 ( 更 像 是 常识 性 指南 )， 用 来 管理 如 何 使 用 日 定义 插件 来 扩 
展 jQuery。 这 些 规 则 不 仅 帮 助 确保 将 新 代 但 正确 地 通信 到 jQuery 染 构 ， 而 且 确 保 新 代码 与 其 他 
jQuery 插件 甚至 其 他 JavaScript 库 能 够 在 一 起 正常 工作 。 

扩展 jQuery 有 两 种 形式 : 

口 直接 定义 在 $ ( jQuery 的 别名 ) 上 的 实用 函数 ; 

口 操作 jQuery 包装 集 的 方法 ( 也 就 是 jQuery 方法 )。 

在 本 市 的 其 余部 分 ,我 们 将 检查 一 些 适用 于 这 两 种 类 型 扩展 的 公用 准则 。 然 后 在 后 面 几 市 中 ， 
我 们 将 探讨 特定 于 编写 每 一 种 类 型 插件 的 准则 和 技术 。 


7.2.1 为 文件 和 函数 命 


7D 7211 the Truth( 实话 实说 ) 是 一 档 起 始 于 20 世纪 $0 年 代 的 美国 电视 游戏 节目 ， 其 中 许多 
参赛 者 都 目 称 是 姓名 相同 的 同一 个 人 , 一 组 名 人 负责 确定 参赛 者 中 哪 一 个 确实 是 现实 中 大 家 都 声 
称 的 那个 人 。 尽管 对 于 电视 观众 而 言 这 很 有 意思 ， 但 是 在 编程 中 名称 冲突 却 一 点 也 不 好 玩 。 

我 们 将 讨论 在 插件 内 部 避免 名 称 冲 突 的 方法 , 但 是 首先 来 给 将 要 编写 的 插件 起 个 文件 名 以 便 
不 会 和 其 他 文件 冲突 。 

这 个 由 jQuery 团队 推荐 的 指南 不 仅 人 简单 ， 而 且 高 效 。 它 提倡 使 用 如 下 格式 : 

口 为 文件 名 添加 jquery 前 绥 ; 

口 前 级 后 面 是 插件 的 名 称 ; 

口 包含 插件 的 主 版 本 号 和 次 版 本 号 ;( 可 选项 ) 

口 以 .js 结束 。 
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例如 ， 如 果 和 希望 编写 一 个 以 Fred 命名 的 插件 ， 这 个 插件 的 JavaScript 文件 名 可 以 是 
jquery.fred-1.0.js。 jquery 前 级 的 使 用 消除 了 与 其 他 库 使 用 的 文件 之 间 可 能 产生 的 名 称 冲 突 。 毕 苋 ， 
任何 人 写 的 非 jQuery 插件 都 没有 理由 使 用 jquery 作为 前 级 ， 不 过 在 jQuery 社区 内 部 这 样 的 命名 
还 是 有 可 能 会 产生 冲突 。 

当 编 写 自己 使 用 的 插件 时 ， 需 要 做 的 全 部 事情 就 是 避免 和 计划 使 用 的 任何 其 他 插件 产生 
冲突 。 但 是 当 计 划 编 写 公 开 给 其 他 人 使 用 的 插件 时 ， 我 们 需要 避免 和 任何 已 经 发 布 的 插件 产 
生 冲 突 。 

避免 冲突 的 最 好 方式 是 与 jQuery 社区 内 现 有 插件 保持 协调 。 一 个 恨 好 的 开端 是 从 http:/ 
plugins.jquery.comy 页 面 开 始 ， 不 过 除了 了 解 社区 已 有 插件 外 ， 还 有 其 他 可 以 采取 的 预防 措施 。 

确保 插件 名 称 不 与 其 他 插件 名 称 发 生 冲 突 的 一 个 方法 , 是 使 用 对 于 我 们 或 者 组 织 而 言 唯一 的 
名 称 来 为 插件 名 称 添加 子 前 级 。 例 如， 本 书 中 开发 的 所 有 插件 都 使 用 文件 名 前 级 jquery.jqia ( jqia 
是 jQuery in Action 的 首 字母 缩写 )， 确 保 它 们 不 会 和 任何 其 他 插件 名 称 冲突 ， 任 何人 都 可 以 在 目 
己 的 应 用 程序 中 使 用 这 些 插 件 。 同样， jQuery 表单 插件 的 文件 以 jquery.form 前 缀 开头 。 并 非 所 有 
的 插件 都 齐 循 这 个 约定 ， 但 是 随 春 插件 数目 的 增加 ， 逐 循 这 种 约定 将 变 得 越 来 越 重要 。 

不 管 它们 是 新 的 实用 冰 数 还 是 操作 jQuery 包 玫 融 上 的 方法 ， 我 们 给 函数 取 名 时 也 需要 采取 
类 似 的 措施 。 

当 创建 自己 使 用 的 插件 时 , 我 们 通常 知道 将 要 使 用 的 其 他 插件 ; 因此 避免 名 称 冲突 是 一 件 容 
昂 的 事情 ,但 是 如 果 创 建 用 于 公共 用 途 的 插件 该 怎么 办 ?或 者 如 果 我 们 最 初 打算 创建 私有 用 途 的 
插件 ， 结 果 证 明 它 们 非常 有 用 以 至 于 我 们 想 和 社区 的 其 他 用 户 分 享 这 些 捅 件 该 怎么 办 ? 

再 次 强调 , 风 悉 已 经 存在 的 插件 对 于 避免 API 冲突 大 有 帮助 , 但 是 我 们 也 或 励 将 相关 盯 数 的 
集合 收集 到 一 个 公共 的 前 缀 之 下 〈 类 似 于 对 文件 名 的 建议 )， 以 避免 命名 空间 混乱 。 

现在 ,该 如 何 处 理 $ 冲 突 ? 















































7.2.2 当心 $ 


“真正 的 $ 站 起 来 好 吗 ?” 

写 了 相当 多 的 jQuery 代码 ， 我 们 已 经 看 到 使 用 $ 别 名 来 代 符 jQuery 有 多 人 么 方便 。 但 是 当 编 
写 可 能 会 用 作 其 他 人 页 面 中 的 插件 时 , 我 们 就 不 能 如 此 的 漫不经心 了 。 作 为 插件 作者 ,我 们 无 法 
知道 Web 开发 者 是 否 打 算 使 用 $s .noconf1lict() 函数 来 允许 $ 别 名 被 男 一 个 库 使 用 。 

可 以 采用 一 刀 切 的 做 法 来 使 用 jQuery 名 称 代替 $s 别名 , 但 可 有 恶 的 是 , 我 们 喜欢 使 用 $, 不 愿 
意 将 它 拱手 相让 。 

第 6 章 引 入 了 一 个 习惯 用 法 ， 它 经 稼 被 用 来 确保 在 局 部 区 域内 让 $ 别 名 指 癌 jQuery 名 称 ， 
而 不 会 影响 页 面 的 其 余部 分 ， 这 个 小 技巧 也 可 以 经常 ) 用 来 定义 jQuery 插件 ， 如 下 所 示 : 


(function(s$)t 























F(T 
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通过 向 参数 为 $ 的 函数 传递 jouery， 从 而 确保 在 函数 主体 内 $ 是 对 jeuery 的 引用 。 
现在 ， 我 们 可 以 高 高 兴 兴 地 在 插件 定义 中 使 用 $ 了 。 
在 深入 学 习 如 何 为 jQuery 添加 新 的 元 素 之 前 , 先 来 看 下 我 们 鼓励 插件 作者 使 用 的 男 一 项 技术 。 


7.2.3 简化 复杂 参数 列表 


大 部 分 的 插件 喜欢 简洁 ,要 么 没有 参数 ,要 么 只 有 几 个 参数 。 我 们 已 经 在 大 部 分 的 核心 jQuery 
方法 稍 数 中 看 到 充分 的 证 据 , 它们 要 么 只 需要 少数 几 个 参数 要 么 一 个 参数 都 不 需要 。 智能 的 默 
认 值 会 在 可 选 的 参数 被 省 略 时 提供 , 并 且 当 一 些 可 选 的 参数 被 省 略 时 , 参数 的 顺序 甚至 可 能 代表 
不 同 的 含义 。 

bind() 方 法 就 是 一 个 很 好 的 例子 。 如 果 省 略 可 选 的 数据 参数 时 , 通常 被 指定 为 第 三 个 参数 的 
监听 器 函数 可 以 作为 第 二 个 参数 来 提供 。JavaScript 动态 性 和 解释 性 允许 我 们 编写 这 样 灵活 的 代 
公 ， 但 是 当 参 数 的 数目 变 大 时 这 种 事情 开始 变 得 容易 出 错 和 复杂 ( 对 于 Web 开发 者 和 插件 作者 
同样 如 此 )。 当 很 多 参数 都 是 可 选 的 时 候 出 错 的 可 能 性 也 随 之 增加 。 

考 奈 如 下 有 点 复杂 的 函数 签名 : 

function complex(p1,p2,p3,p4,p5,p6,D7) { 

这 个 也 数 接受 7 个 参数 , 假设 除了 第 一 个 其 他 参数 都 是 可 选 的 。 当 省 略 可 选 的 参数 时 ， 就 会 存 
在 过 多 的 可 选 参数 , 这 样 就 不 能 根据 调用 者 的 意图 做 出 任何 智能 的 猜测。 如 果 该 函数 的 调用 者 只 是 
省 略 了 结尾 的 参数 ， 那 就 不 成 问题 ， 因 为 尾部 的 可 选 参数 可 以 被 检测 为 null。 但 是 如 果 调 用 者 想 
指定 pb7， 而 让 p2 到 p6 保持 默认 值 该 怎么 办 ? 调用 者 需要 为 省 略 的 参数 使 用 占 位 符 ， 如 下 所 示 : 

complex (valueA,null,null,null,null,null,valueB); 

哎呀 ! 更 糟糕 的 调用 是 这 样 的 : 

complex (valueA,null,valueC,valueD,null,null,valueB); 

以 及 由 这 种 性 质 决 定 的 其 他 变 体 。 使 用 这 个 也 数 的 Web 开发 者 不 得 不 小 心 波 交 地 跟踪 计算 
nul1 的 个 数 和 参数 的 顺序 ， 另 外 也 很 难 阅读 和 理解 这 个 代码 。 

但 是 除了 不 给 调用 者 提供 过 多 的 选项 以 外 ， 还 有 什么 办 法 呢 ? 

JavaScript 灵活 性 再 次 派 上 用 场 ; 平 上 县 这 种 混乱 的 模式 已 在 页 面 开 发 社区 兴起 一 一 选项 散 列 















































值 。 使 用 这 种 模式 ， 就 可 以 将 可 选 的 参数 收集 到 以 JavaScript 的 object 实例 来 呈现 的 单个 参数 
中 ，opbject 实例 的 名 称 / 值 对 属性 作为 可 选 的 参数 。 


使 用 这 种 技术 ， 第 一 个 示例 可 以 这 么 写 : 
complex(valueA, {Pp/: valueB}); 
第 二 个 可 以 这 人 么 写 : 
Complex(valueA, 
D3: valueC, 
D4: valueD, 


D7: valueB 
}); 
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这 好 多 |! 
我 们 不 用 必须 为 省 略 的 参数 使 用 占 位 符 nul1l1， 也 不 再 需要 计算 参数 的 个 数 ， 每 个 可 选 的 参数 
都 补贴 上 了 标签 以 便 清晰 地 表明 该 参数 代表 了 什么 当 使 用 比 pl ~ p7 更 好 的 参数 名 称 的 时 候 )。 


注意 D0 APIDOD00000—i0000000000 cptionsUDUODOUOOODOOODOD 
UUDOUDODUUOD APOUDOUDOOUUOUUUUUUUUUUUUUUUUUUD 
UDO UUUUUUUUD 





尽管 对 于 复杂 函数 的 调用 者 而 言 这 明显 有 很 大 的 优 妇 ,但 是 这 对 于 插件 作者 会 有 什么 后 来 
呢 ? 事实 证 明 , jQuery 提供 的 机 制 可 以 用 来 将 这 些 可 选 参数 收集 在 一 起 并 将 其 与 默认 值 合 并 。 下 
面 重新 考虑 拥有 1 个 必需 参数 和 6 个 可 选 参 数 的 复杂 的 示例 函数 。 简 化 后 的 新 函数 签名 如 下 所 示 : 

complex (pl1,options) 

在 哨 数 中 ， 我 们 可 以 使 用 便捷 的 $ .extend() 实 用 也 数 将 这 些 选 项 与 默认 值 合 并 。 考 虑 如 下 
代码 : 


function complex(pl,options) { 





Var settings = S$.extendlt 
optionil: defaultValuel, 
option2: defaultValue2, 
option3: defaultValue3, 
option4: defaultValue4, 
option5: defaultValueS5, 
option6: defaultValue6 

}:options| |{}); 


00000000… 
通过 把 Web 开发 者 传递 到 options 参数 的 值 与 包含 所 有 可 用 选项 默认 值 的 对 象 合 并 ， 
settings 变量 最 终 成 为 由 Web 开发 者 指定 的 任何 显 式 值 所 取代 的 于 认 值 。 








提示 00D0000 options00000000000000000000 settingsDDUD 
UUDOUD0O00000D00U00000U00000000U0U0UUUUUUUD 


注意 ， 我 们 使 用 | | {} 来 防止 options 对 象 是 null 或 undefined， 如 果 options 求 值 为 
false (众所周知 null 和 undefined 正 是 如 此 ) 则 提供 一 个 空 对 象 。 

简单 、 通 用 并 且 对 调用 者 友好 ! 

在 本 章 的 稍 后 部 分 和 第 8 章 将 要 介绍 的 jQuery 函数 中 ， 我 们 将 看 到 使 用 这 个 模式 的 示例 ， 
但 是 目前 先 来 看 看 如 何 使 用 自 定 义 实用 少数 来 扩展 jQuery。 


7.3 ”编写 目 定 义 实 用 防 数 
本 书 中 ,我 们 使 用 术语 实用 函数 来 描述 定义 为 jouery ( 因此 也 是 $ ) 属性 的 函数 。 这 些 函 数 
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不 是 为 了 操作 DOM 元 系 〈 那 是 为 操作 jQuery 包装 集 而 定义 的 方法 的 工作 )， 它 们 或 者 是 操作 非 
元 素 的 JavaScript 对 象 ， 或 者 是 执行 一 些 其 他 的 不 具体 操作 任何 对 象 的 行为 。 我 们 看 到 过 的 这 些 
类 型 的 羡 数 分 别 有 $ .each() 和 $ .noCconflict()。 

本 节 中 ， 我 们 将 学 习 如 何 添加 类 似 的 目 定 义 函数 。 

将 函数 添加 为 object 实例 的 属性 很 简单 ,就 如 同 声明 函数 并 把 它 赋 值 给 opject 属性 一 样 。 
(如 果 这 看 起 来 像 黑 魔法 , 并 且 你 还 没有 通读 附录 ,现在 正 是 通读 附录 的 好 时 机 。) 创建 普通 的 自 
定义 实用 困 数 非常 简单 : 

ssay = function(what) { alert(I say ‘+what); }; 

事实 上 ， 它 就 是 那么 的 容易 。 但 是 这 种 定义 实用 也 数 的 方式 不 是 没有 缺陷 的 。 记 得 7.2.2 市 
中 关于 $s 的 讨论 吗 ? 如 果 开 发 者 在 使 用 Prototype 的 页 面包 含 这 个 函数 并 且 已 经 调用 过 
$ .noConflict() 该 怎么 办 ? 我们 将 会 在 Prototype 的 $ () 图 数 上 创建 一 个 方法 ， 而 不 是 添加 了 一 
个 jQuery 扩展 。( 如 有 果 概 念 “函数 的 方法 ”让 你 头疼 的 话 ， 请 通读 附录 。 ) 

对 于 永远 不 会 公开 的 私有 荫 数 来 说 ,这 没有 问题 。 但 是 即使 那样 ， 如 果 将 来 对 页 面 的 改变 导 
致 重新 分 配 s 该 怎么 办 ?小 心 谨慎 不 出 错 才 好 。 

确保 其 他 人 对 $ 的 改变 不 会 影响 到 我 们 的 一 种 方式 是 完全 避免 使 用 $。, 可 以 像 下 面 这 样 编写 那 
个 普通 的 函数 : 

jQuery.say = function(what) { alert('I say '+what); }; 

这 看 起 来 似乎 是 一 种 简单 的 解决 办 法 ， 但 事实 证 明 对 于 复杂 的 国 数 这 决 不 是 最 佳 的 解决 方 
案 。 如 果 函 数 主 体内 部 使 用 了 大 量 jQuery 方法 和 函数 来 完成 工作 ， 该 怎么 办 ? 我 们 需要 在 琐 数 
内 部 目 始 至 终 使 用 jQuery 而 不 是 $。 这 相当 哆 嗓 晶 不 优雅 ， 此 外 一 旦 使 用 过 s， 就 会 对 它 爱 不 
释 手 。 

回顾 7.2.2 节 介 绍 的 习惯 用 法 ， 可 以 按照 如 下 方式 安全 地 编写 也 数 : 


(function(S$)t 
Ss.say = function(what) { alert('I say '+what); }; 
7 (IOUery yy 


我 们 强烈 推荐 使 用 这 种 模式 ( 尽管 对 于 如 此 稀 单 的 一 个 函数 而 言 有 点 大 材 小 用 )， 因 为 它 可 
以 在 声明 和 定义 函数 时 保护 $ 的 使 用 。 如 末 函 数 需 要 变 得 更 加 复杂 ， 我 们 可 以 扩展 和 修改 它 ， 而 
无 需 担 心 使 用 $ 是 否 安全 。 

我 们 现在 趁 热 打 铁 ， 马 上 来 实现 一 个 较 复 杂 的 目 定义 实用 函数 。 



































7.3.1 创建 数据 操作 的 实用 函数 


当 进 行 定 宽 输 出 的 时 候 , 需要 格式 化 一 个 数 子 值 以 适合 定 客 的 字段 (这 里 的 宽度 定义 为 字符 
的 个 数 )。 这 种 操作 经 常会 在 定 宽 字段 中 向 右 对 齐 数 字 值 ， 并 为 数字 值 添加 足够 的 填充 字符 前 级 
来 弥补 数字 值 长 度 和 字段 长 度 之 间 的 差异 。 

下 面 来 编写 这 样 的 一 个 实用 水 数 ， 语 法 如 下 所 示 。 
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函数 语法 : $.toFixedwWidth 
$.toFixedWidth(value, length, f£i1l1) 
把 传 入 的 值 格式 化 为 指定 长 度 的 定 宽 字 段 。 可 以 提供 一 个 可 选 的 填充 字符 。 如 果 数 字 值 的 长 
度 超过 了 指定 的 长 度 ， 它 的 高 位 数字 将 被 截断 以 便 符 合 指定 的 长 度 


参数 
value ( 数字 ) 将 要 格式 化 的 值 
length (数字 ) 结果 字段 的 长 度 
£ill (字符 事 ) 对 数字 值 进 行 前 ( 左 ) 填充 时 使 用 的 填充 字符 。 如 果 省 略 ， 则 默认 为 0 
返回 什 
定 宪 字 段 


文 个 函数 的 实现 如 代码 清单 7-1 所 示 。 
代码 清单 7-1 实现 $.toFixedwidqth() 目 定 义 实用 因数 


(Eunction(S)T 


$ .toFixedWidth function(value,length,f1i11) f{ 





var result = (value || '').toString(); 
S11 TL | ws @@ 分 配 默 认 值 
var padding = length - result.1length.; @@ 计算 填充 长 度 
if (padding < 0) { 

esult eS Tesult. substr( -paning)s 全 如 果 必 要 则 截断 字符 串 
- 
else { 

for (var n = 0; n < padding; n++) 

result = fill + result,; 4 填充 结果 
} 
return result; @Q@ 返回 最 终结 果 
了 
1 (Oury)s 











文 个 函数 简单 明了 。 传人 的 值 被 转换 为 它 的 等 价 字 符 捉 ,填充 字符 由 传人 的 值 或 默认 值 0 共 
同 决定 人 @。 然 后 计算 需要 填充 的 字符 个 数 @，。 

如 果 最 终 拿 到 的 填充 数 是 负数 (结果 值 比 传人 字段 的 长 度 还 要 长 )， 则 从 结果 值 的 开头 截断 
字符 串 最 终 得 到 指定 长 度 的 字符 串 合 ; 否则 在 把 结果 值 作为 函数 结果 返回 之 前 人 @, 在 其 开头 补足 
适当 个 数 的 填充 字符 @， 


为 实用 函数 添加 命名 空间 

如 果 想 确保 自己 的 实用 函数 不 会 和 其 他 人 的 实用 函数 冲突 ， 可 以 通过 在 $ 上 创建 命名 空间 
对 象 来 为 函数 添加 命名 空间 ， 反 过 来 说 这 个 命名 空间 充当 了 郊 数 的 拥有 者 。 例 如， 如 果 我 们 想 
将 所 有 的 日 期 格式 化 函数 放 在 名 为 jQiaDateFormater 的 命名 空间 中 ， 可 以 这 么 做 : 


$.jQiaDateFormatter = {}; 
$.jQiaDateFormatter.toFixedWidth = function(value,length,fi1l1) {...}:; 


这 确保 了 像 toFixedWwidqth() 这 样 的 函数 永远 不 会 和 另 一 个 名 字 类 似 的 函数 冲突 。( 当然 
了 ， 我 们 仍然 需要 为 命名 空间 冲突 担忧 ， 但 是 这 个 很 容易 处 理 。) 
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t 





中 





> 上 上 面 这 个 简单 的 示例 向 我 们 展示 了 添加 实用 函数 是 多 么 地 容易 。 但 还 是 会 有 改进 的 余地 。 考 

虑 如 下 练习 题 。 

(1) 像 本 书 中 的 大 部 分 示例 那样 ， 错 误 检 测 被 减 到 最 小 以 便 关 注 眼 前 的 示例 。 你 将 如 何 改 进 
这 个 函数 以 便 应 对 调用 者 的 错误 (例如 没有 为 value 和 length 传人 数字 类 型 的 值 ) 呢 ? 如 果 调 
用 者 完全 不 传递 这 些 参 数 ， 该 怎么 办 ? 

(2) 我 们 很 小 心地 截断 过 长 的 数字 值 ， 以 便 确 保 结果 总 是 符合 指定 的 长 度 。 但 是 如 果 调 用 者 
为 填充 字符 传递 多 于 单个 字符 的 字符 串 ， 那 就 前 功 尽 弃 了 。 你 该 如 何 处 理 这 种 情况 ? 

(3) 如 果 不 想 截断 过 长 的 数字 值 该 怎么 办 ? 

现在 来 处 理 一 个 更 加 复杂 的 函数 ,我 们 可 以 在 其 中 使 用 刚刚 编写 的 $ .toFixegdwiqdth() 子 数 。 


7.3.2 编写 日 期 格式 器 


如 果 由 服务 器 端 转向 客户 端 编程 世界 ， 那 么 你 盼望 已 久 的 一 件 事 情 可 能 是 方便 的 日 期 格式 
器 ; JavaScript 的 Date 类 型 不 提供 的 这 个 功能 。 因 为 这 样 的 一 个 函数 将 要 操作 Date 实例 而 不 是 
任何 的 DOM 元素， 因此 它 是 实用 函数 的 完美 候选 者 。 下 面 编写 这 样 的 图 数 ， 语 法 如 下 所 示 。 


浮 数 语法 : $ .formatDate 





























$.formatDate (date, pattern) 

根据 提供 的 模式 格式 化 传 入 的 上 日期。 在 模式 中 被 替换 的 标记 如 下 所 示 。 
yyyy: 4 位 数字 的 年 份 

yy: 2 位 数字 的 年 份 

MMMM: 月 份 的 完整 名 称 

MMM: 月 份 的 缩写 名 称 

MM: 由 0 补足 的 、2 个 字符 字段 的 月 份 数字 

M: 月 份 数 字 

dd: 由 0 补足 的 、2 个 穿 符 字段 的 月 份 中 的 天 

d: 月 份 中 的 天 

EEEE: 星期 中 天 的 完整 名 称 

EEE: 星期 中 天 的 缩写 名 称 

a: 上 午 或 者 下 午 (AM 或 者 PM ) 

HH: 由 0 补足 的 、2 个 字符 字段 的 一 天 中 24 小 时 制 的 第 几 个 小 时 
H: 一 天 中 24 小 时 制 的 第 几 个 小 时 

hh: 由 0 补足 的 、2 个 字符 字段 的 一 天 中 12 小 时 制 的 第 几 个 小 时 
h: 一 天 中 12 小 时 制 的 第 几 个 小 时 

mm: 由 0 补足 的 、2 个 字符 字段 的 一 小 时 中 的 分 钟 数 

m: 一 小 时 中 的 分 钟 数 

SS: 由 0 补足 的 、2 个 字符 字段 的 一 分 钟 内 的 秒 数 

S: 一 分 钟 内 的 秒 数 

S: 由 0 补足 的 、3 个 字符 字段 的 一 秒 内 的 毫秒 数 
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date (日 期 ) 将 要 格式 化 的 日 期 
battern ( 字符 串 ) 用 来 格式 化 日 期 的 模式 。 任 何不 匹配 模式 标记 的 字符 被 原封 不 动 地 复制 到 结果 中 
返回 值 
格式 化 后 的 日 期 
0 在 代码 清单 7-2 中 。 我 们 不 打算 非常 详细 地 介绍 用 来 执行 格式 化 的 算法 
(毕竟 ,这 不 是 介绍 算法 的 图 书 ), 不 过 我 们 将 通过 这 个 实现 指出 一 些 有 趣 的 策略 ， 在 创建 稍微 复 





杂 的 实用 | 会 用 到 这 些 末 略 。 


代码 清单 7-2 ss .formatDate() 目 定义 实用 也 数 的 实现 
(Eunction(gs){ ° 实现 函数 主体 


$s.formatDate = function(date,pattern) { 
var result = []; 
while (pattern.length > 0) { 
$s.formatDate.patternparts.lastIindex = 0; 
Var matched = $.formatDate.patternParts.exec (pattern); 
if (matched) { 
result.push( 
$.formatDate.patternValue[lmatched[0]] .call(this,date) 
人 
Pattern = pattetrn.slLllicel(matcnheada[0]. Lengtn) ，; 
} else { 
result.push (pattern.charAt (0)); 
Pattern = pattern.slice(1).; 
) 
} 
return result.join(''); 9 定义 正则 表达 式 
}; 
$.formatDate.patternparts = 
/~^(yy(yy)?|M(M(M(M) ?)?)?|d(d)?|EEE(E)?|alH(H)?|h(h)?|m(m)?|s(s)?|s)/ 





$s.formatDate.monthNames = | @ 提供 月 份 的 名 称 
'January', 'February', 'March', 'April','May', 'June', 'July', 
'AuUgust','September', 'October', 'November', 'December' 

] ; 了 提供 星期 中 每 天 的 名 称 

$s.formatDate.dayNames = [| 
'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 
'Saturday 

请 收集 “标记 到 值 ”的 转换 函数 

$s.formatDate.patternValue = { 
yy: function(date) { 

return S$S.toFixedWidth (date.getFullYear(),2); 
yyyy: function(date) { 

return date.getFullYear() .toString().; 
}, 
MMMM: function(date) { 

return S$.formatDate.monthNames[date.getMonth()]:; 


}, 
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MMM: function(date) { 
return S$.formatDate.monthNames[date.getMonth()] .substr(0,3).; 


] ， 


MM: function(date) { 
return S$.toFixedWidth(date.getMonth() + 1,2).， 


}, 


M: function(date) { 
return date.getMonth()+1; 


] ， 


dd: function(date) ({ 
return S$.torFrixedWidth(date.getDate(),2); 


}, 


d: function(date) { 
return date.getDatel().; 


}, 


EEEE: function(date) { 
return S$.formatDate.dayNames[date.getDay ()|]; 


}, 


EEE: function(date) { 
return $.formatDate.dayNames[date.getDay() |] .substr(0,3).; 


}, 


HH: function(date) { 
return S$.toFixedWidth(date.getHours(),2).;， 


}, 


H: function(date) { 
return date.getHours(); 


] ， 


hh: function(date) { 


Var hours 


date.getHours ();} 


return S$.toFixedWidth(hours > 12 ? hours - 12 : hours,2).;， 


}, 


h: function(date) { 


return date.getHours() % 12; 


a 


mm: function(date) { 
return S$.toFixedWidth (date.getMinutes (),2); 


过 


m: function(date) { 
return date.getMinutes(); 


}, 


ss: function(date) { 
return S$.toFixedWidth (date.getSeconds (),2);， 


i 


s: function(date) { 
return date.getSeconds ( ) ; 


] ， 


S: function(date) { 
return S$S.torFixedWidth(date.getMilliseconds(),3); 


Ly 


a: function(date) { 
return date.getHours() < 12 ? 'AM' : 'PM',， 


} 
}2 
}) (JQuery); 
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除了 一 些 用 于 控制 代码 量 的 JavaScript 技巧 之 外 ， 这 个 实现 最 有 趣 的 地 方 是 需要 一 些 辅 助 数 
据 来 完成 工作 的 函数 @。 特 别 是 以 下 各 方面 : 

口 用 来 匹配 模式 中 标记 的 正则 表达 式 @; 

口 月 份 的 英文 名 称 列表 合 ; 

口 星期 几 的 英文 列表 @; 

口 一 组 子 函 数 来 (通过 给 定 的 源 日 期 ) 为 每 个 标记 类 型 提供 值 @，。 

我 们 可 以 在 函数 主体 中 通过 var 定义 来 包含 每 个 数据 ， 但 是 这 可 能 使 已 经 很 棘手 的 算法 更 
加 阎 乱 ， 因 为 它们 者 是 背 量 ， 因 此 将 它们 从 可 变数 据 中 分 离开 来 是 有 意义 的 。 

我 们 不 想 让 只 有 这 个 函数 会 用 到 一 些 名 称 污染 全 局 命名 空间 ， 其 至 是 $ 命 名 空间 ， 因 此 在 新 
咀 数 "上 声明 这 些 属性 。 记 住 ，JavaScript 函数 是 一 等 的 对 象 ， 它 们 可 以 像 任何 其 他 JavaScript 对 
象 一 样 拥有 目 己 的 属性 。 

至 于 格式 算法 本 身 ? 向 而 言 之 ， 它 的 操作 如 下 。 

(1) 创建 一 个 数组 来 保持 结果 的 各 个 部 分 。 

(2) 遍历 模式 ， 用 掉 已 识别 的 标记 和 非 标记 字符 ， 直 到 模式 检查 完毕 。 

(3) 通过 设置 正则 表达 式 的 lastIndex 属性 为 0,， 来 在 每 次 裔 历时 重 置 它 ( 存储 在 
s .formatDate.patternParts 中 )。 

(4) 为 了 匹配 模式 当前 开头 处 的 标记 ,测试 正则 表达 式 。 

(5) 如 果 发 生 匹 配 ， 就 从 $ .formatDate.patternValue 转换 果 数 集合 中 调用 困 数 ， 从 Date 
实例 获取 适当 的 值 。 将 这 个 值 添加 到 结果 数组 的 末尾 ， 并 且 从 模式 的 开头 删除 匹配 的 标记 。 

(6) 如 末 没 有 在 模式 的 当前 开头 位 置 匹 配 到 标记 ， 则 从 模式 中 删除 第 一 个 字符 并 且 把 它 汐 加 
到 结果 数组 的 末尾 。 

(7) 当 整 个 模式 被 用 光 的 时 候 ， 把 绪 末 数组 连接 成 一 个 字符 串 ， 并 作为 国 数 的 人 返回 。 

注意 ， S$.formatDate.patternValue 集合 中 的 转换 函数 使 用 了 了 六 一 节 创 建 的 S .toFixed-— 
Width () 国 数 。 

可 以 在 文件 chapter7/jquery.jqia.dateFormat.js 中 找到 这 两 个 困 数 , chapter7/test.dateFormat.html 
是 用 于 测试 这 个 插件 的 基本 页 面 。 

操作 普通 的 JavaScript 对 象 也 不 错 ， 但 是 jQuery 的 真正 力量 在 于 操作 DOM 元 素 集 合 的 包装 
需 方法 〈 通 过 强大 的 jQuery 选择 部 创 建 的 ) 下 面 来 看 下 如 何 添 加 目 定 义 的 强大 的 包装 需 方法 。 


7.4 ”添加 新 的 包装 器 方法 


jQuery 的 真正 威力 在 于 方便 快捷 地 选择 和 操作 DOM 元 系 的 能 力 。 羡 运 的 是 ,我 们 可 以 通过 
添加 目 己 的 包 净 带 方法 来 扩展 这 种 能 力 ， 这 些 包 痛 表 方法 是 用 来 操作 我 们 认为 合适 的 选 定 的 
DOM 元 素 。 通 过 添加 包 奢 天 方法 ,我们 可 以 使 用 强大 的 jQuery 选择 甫 选取 要 在 哪些 元 系 上 进行 
操作 ， 而 无 需 目 己 完成 所 有 的 工作 。 


















































Q 这 个 新 函数 指 的 就 是 $ .formatDate 子 数 。 
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使 用 已 有 的 Javascript 知识 , 我 们 大 概 可 以 知道 如 何 添 加 实用 困 数 到 $ 命 名 空间 , 但 是 对 于 包 
装 融 方法 这 不 一 定 是 对 的 。 我 们 需要 知道 jQuery 特有 的 一 件 事 情 : 要 给 jQuery 添加 包装 需 方 法 ， 
必须 把 这 些 方法 赋值 给 $ 命 名 空间 中 名 为 fn 的 对 象 的 属性 。 

创建 包装 絮 函 数 的 一 般 模式 为 : 

$s.fn.wrapperFunctionName = function(params) {function-body}; 

下 面 构建 简单 的 包装 需 方 法 将 匹配 DOM 元 素 的 颜色 设置 为 蓝 色 : 

(Eunction(S) 1{ 

s .fn.makeItBlue = function() { 
return this.css('color','blue'); 


小， 
上 (GO 


与 创建 实用 函数 一 样 ， 我 们 在 确保 $ 为 jQuery 别名 的 外 部 函数 内 声明 包装 问 方 法 。 但 是 和 
实用 因数 不 同 ， 我 们 将 新 的 包装 名 方法 创建 为 $. fn 属性 ， 而 不 是 $ 的 属性 。 


























注意 D0000“00000 JavaScript" O00000000000000000$.ftn 
UUUUUUU prototyreD UDUDDNQery UOUDUU0UUUUUUU0 


在 该 方法 的 主体 内 ， 哺 数 上 下 文 ( this ) 指 癌 包 装 集 。 我 们 可 以 在 该 方法 上 使 用 所 有 预定 
义 的 jQuery 方法 。 在 本 例 中 ,我 们 在 包 法 集 上 调用 了 css() 方 法 来 设置 所 有 已 匹配 DOM 元 素 的 
color 为 plue。 





警告 D00000000000000tisg00000000000000000000 
DDOUDOUDOO0UO00O0DOO0U0000U0U0UUU0UUU0UUUNU chis0UUUUD 
DDOUOUDUODUODOUUUUUUUUUUUD jQuery 0 eacr UUUUUD 
UDDOUODOUUDUUUUD thrisUUUUUUUUU DoOMUUUD 


我 们 可 以 对 包 污 集 的 DOM 元 素 进 行 儿 乎 任何 想 要 的 操作 , 但 是 在 定义 新 的 包 朔 需 方 法 时 还 
有 一 个 非常 重要 的 原则 : 除非 要 返回 特定 的 值 ， 否则 函数 应 该 总 是 将 包 北 集 作为 其 返回 值 。 这 人 允 
许 新 方法 参与 到 任何 jQuery 方法 链 中 。 在 示例 中 ， 因 为 css () 方 法 返回 的 是 包装 器 ， 所 以 返回 
css () 的 调用 结果 即 可 。 

在 之 前 的 示例 中 , 我 们 使 用 this 将 jQuery 的 css () 方 法 应 用 到 包装 集中 的 所 有 元 素 上 。 如 
果 出 于 某 种 原因 ， 需 要 单独 处 理 每 个 包装 元 素 ( 可 能 是 因为 要 根据 条 件 来 决定 处 理 过程 )， 那 么 




















可 以 使 用 如 下 模式 : 
(function(S$)t 
$.fn.someNewMethod = function() { 
return this.each (function()t 
// 
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/UUDUUUUUUUthisUUUUU DOMUUD 
a 
}); 
}; 
}) (TOUuUSry); 


在 这 个 模式 中 , each () 方 法 用 来 所 历 包 汤 集中 每 个 单独 的 元 素 。 注 意 , 在 迭代 右 消 数 内 this 
指 回 当 前 DOM 元 系 而 不 是 整个 包 疙 集 。each () 返回 的 包 次 上 集 作为 新 方法 的 值 ， 因此 这 个 新 方法 
可 以 参与 到 方法 链 中 。 

下 面 思考 一 个 之 前 提 到 的 设置 元 素颜 色 为 蓝 色 的 示例 的 变 体 ， 它 可 以 单独 处 理 每 个 元 系 : 


(function(S$)t 
$s.fn.makeItBlueOrRed = function() { 
return this.each (function()t 
s(this).css('color',S(this).is('[id]') ? 'blue' : 'red'); 
了 
] 
} 


在 这 个 变 体 里 ， 我 们 想 根 据 每 个 元 素 的 独特 条 件 (在 这 个 案例 中 , 条 件 是 元 素 是 否 拥有 ia 
特性 ) 来 设置 颜色 , 颜色 可 以 是 blue 或 red, 这 需要 遍历 包装 集 以 便 单 独 检测 和 操作 每 个 元 对 。 


























通过 使 用 接受 子 数 作为 值 的 方法 来 进行 遍历 

注意 ，blue 或 red 示例 用 来 展示 如 何 使 用 each() 来 遍历 包 某 集 中 的 单个 元 素 有 点 原 强 。 
因为 css () 方 法 接受 函数 作为 值 (该 函数 会 自动 遍历 这 些 元 素 )， 聪 明 的 你 可 能 已 经 注意 到 这 
个 自 定 义 方法 可 以 不 使 用 each() 来 编写 ， 如 下 所 示 : 


(function(s$)t 
$s.fn.makeItBlueOrRed = function() { 





return this.css('color',function() { 
LEE (Enis) .lS( LG) © oluea so Padl's 
7 
局 
eu 
这 是 一 个 在 jQuery API 中 常见 的 习惯 用 法 。 当 传递 一 个 函数 来 取代 某 个 值 的 时 候 , 会 以 遍 
装 集中 元 素 的 形式 来 调用 该 函数 


使 用 each() 的 示例 变 体 展 示 了 没有 这 种 自动 遍历 元 素 的 情况 。 


这 就 是 创建 包装 需 方法 的 全 部 内 容 , 但 是 (怎么 总 是 有 但 是 呢 ? ) 在 创建 更 加 复杂 的 jQuery 
包 疼 人 郁 方 法 时 ， 还 有 一 些 拉 巧 需要 注意 。 F 面 再 定 义 夯 外 两 个 更 加 复杂 的 插件 方法 来 考察 这 些 
拉 蕊 。 


7.4.1 在 包装 器 方法 中 应 用 多 个 操作 


接 下 来 开发 妨 一 个 新 的 插件 方法 用 来 在 包装 集 上 进行 多 个 操作 。 假设 需要 切换 表单 中 的 文本 
字段 的 只 谈 状 态 ， 同 时 改变 字段 的 外 观 。 可 以 将 几 个 现 有 的 jQuery 方法 链接 起 来 轻松 完成 这 个 
任务 ， 但 是 我 们 想 要 整齐 利沙 地 完成 这 个 任务 并 将 这 些 操 作 绑 定 到 单个 方法 里 。 
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我 们 将 新 方法 命名 为 setReadonly() ， 其 语法 如 下 所 示 。 


方法 语法 : setReadonly 
setReadOnly (state) 
设置 包装 文本 字段 的 只 读 状 态 为 state 指定 的 状态 。 调 整 字段 的 不 透明 度 : 如 果 不 处 于 只 读 
状态 ， 则 设置 为 100%; 如 果 处 于 只 读 状 态 ， 则 设置 为 S0%。 忽 略 包 装 集中 除了 文本 字段 以 
外 的 任何 元 素 


参数 

state (布尔 ) 要 设置 的 只 读 状态 。 如 果 为 true， 则 设置 文本 字段 为 只 读 状态 ; 否则 清空 
只 读 状态 

返回 值 

包装 集 


这 个 插件 的 实现 如 代码 清单 7-3 所 示 ,也 可 以 在 文件 chapter7/jquery.jqia.setreadonly.js 中 找到 。 


代码 清单 7-3 setReadonly () 目 定义 包装 六 方法 的 实现 
(function(S$)t 
$s.fn.setReadonly = function(readonly) { 
return this.filter('input:text’') 

.attr('readOonly',readonly) 
.Css('opacity', readonly ? 0.5 : 1.0) 
.end(); 

je 

FQ) 

这 个 示例 只 比 最 初 的 示例 稍微 复杂 了 点 ， 但 是 它 展 示 了 下 列 关 键 概念 。 

口 传人 的 参数 影响 方法 的 操作 。 

口 通过 使 用 jQuery 链 来 对 包装 集 应 用 4 个 jQuery 方法 。 

口 新 的 方法 可 以 参与 jQuery 链 ， 因 为 该 方法 将 包装 集 作 为 其 返回 值 。 

D fijlter () 方 法 用 来 确保 无 论 Web 开发 者 问 包 装 右 方法 应 用 了 什么 包 疙 元 系 集 ， 只 有 文本 字段 

受 影响 。 

口 调用 eng () 方 法 以 便 将 原始 的 包 污 集 (并非 过 滤 后 的 包 疙 集 ) 作为 调用 的 值 返回 。 

该 如 何 使 用 这 个 方法 呢 ? 

通 浓 ， 当 定义 一 个 在 线 订 购 单 时 , 我 们 可 能 需要 允许 用 户 输入 两 套 地 址 信息 : 一 个 是 送 货 目 
的 地 ， 为 一 个 是 账单 目的 地 。 大 多 数 情 况 下 ， 这 两 个 地 址 是 一 样 的 ， 让 用 户 两 次 输入 相同 的 信息 
会 降低 用 户 友好 度 ， 这 不 是 我 们 想 要 的 。 

可 以 编写 服务 硕 闪 代 但 来 假定 账单 地 址 和 送 赁 地 址 相同 〈 如 采 账 单 表单 留 空 的 话 )。 但 是 假 
设 我 们 的 产品 经 理 有 点 偏执 ,要求 用 户 明 确 确认 这 两 个 地 址 是 一 样 的 。 

可 以 通过 如 下 方式 来 满足 产品 经 理 的 需求 : 癌 账单 地 址 添加 一 个 复 选 框 来 表明 账单 地 址 是 否 
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与 送 货 地 址 相同 。 如 果 选 中 复 选 框 ,会 从 送 贷 地 址 字段 复制 内 容 到 账单 地 址 字段 ,并 且 设 置 账单 
地 址 为 只 读 状 态 。 取 消 勾 选 复 选 框 会 清空 账单 地 址 字段 的 值 并 取消 只 读 状态 。 
图 7-1a 展示 了 状态 改变 前 的 测试 表单 ， 图 7-1b 展示 了 状态 改变 后 的 测试 表单 。 


@00 setReadOnly() Test SS 
[oy EE | © http://localhost/jgia2/chaprer7/restsetReadOnly.html 











First name: Spike 


Last name: Spiegel 
Shipping address 
Street address: 123 Bebop Lane 
City, state, zip: [Austin |Tx |l78701 | 
Billing address 


gilling address is same as shipping address 
Street address: 


City, state, zip: 


图 7-1la 测试 setReadonly () 目 定义 包装 胡 方 法 的 表单 ， 展 示 了 选中 复 选 框 之 前 的 状态 


@N0 setReadOnly0 Test 号 | 
四 本 站 x , © http:/ /localhost/jqia2 /chapter7 /test.setReadOnly.html 六 








First name: spike 





Last name: Spiegel 


Shipping address 

Street address: 123 bebop Lane 

City, state, zip: Austin TX ?8701 
Billing address 


网 Billing address is same as shipping address 
Street address: 123 gebop Lane 


City, state, zip: Ausuil 





图 7-lb 测试 setReadonly() 目 定 义 包装 带 方 法 的 表单 ， 展 示 了 选中 复 选 框 之 后 
应 用 日 定义 方法 的 结 


这 个 测试 表单 的 页 面 可 以 从 文件 chapter7/test.setReadOnly.html 获取 ， 代 码 如 代码 清单 7-4 
所 示 。 
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代码 清单 7-4 为 setReadonly() 包 装 铸 方法 实现 的 测试 页 面 


<!IDOCTYPE html> 


<html> 
<head> 
<title>setReadonly() Test</title> 
<link rel="stylesheet" type="text/css" href="../styles/core.css" /> 
<link rel="stylesheet" type="text/css" href="test.setReadOnly.css" /> 
<script type="text/javascript" src="../scripts/jaquery-1.4.js"></script> 


<script type="text/javascript" src="jJquery.J9gqia.setReadOonly.js"></script> 
<script type="text/javascript"> 
Ss (function()t 
$('#sameAddressControl') .click(function()t 
Var same = this.checked; 
$s('#billAddress') .val (same ? S('#shipAddress') .val ():''); 


人 
$('#billstate').val (same ? $('#shipSstate') .val():''); 
人 
$('#billingAddress Inbut ') .SetReadonly(same) :; 


}); 
pe 
</script> 
</head> 


<body> 
<div class="module"> 
<div class="banner'"> 
<ijmg src="../images/module.left.cap.png" alt="" style="float:left"/> 
<ijmg src="../images/module.right.cap.png" alt="" 
style="float:right"/> 
<h2>Test setReadOonly()</h2> 
</div> 
<div class="body"> 


<form name="testForm"> 
<div> 
<label>First name:</label> 
<input type="text" name="firstName" id="firstName'"/> 
</div> 
<div> 
<label>Last name:</label> 
<input type="text" name="l]astName" id="lastName'"/> 
</div> 
<div id="shippingAddress"> 
<h2>Shipping address</h2> 
<div> 
<label>Sstreet address:</1label> 
<input type="text" name="shipAddress" id="shipAddress"/> 
</div> 
<div> 
<label>City, state, zip:</label> 
<input type="text" name="shipCity" id="shipCity"/> 
<input type="text" name="shipState" id="shipState'"/> 
<input type="text" name="shipZip" id="shipZip"/> 
</div> 
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</div> 
<div id="billingAddress"> 
<h2>Billing address</h2> 
<div> 
<input type="checkbox" id="sameAddressControl"/> 
Billing address is same as shipping address 
</div> 
<div> 
<label>Street address:</label> 
<input type="text" name="billAddress'" 
i1d="billAddress"/> 
</div> 
<div> 
<label>City, state, zip:</label> 
<input type="text" name="billCity" id="billCity"/> 
<input type="text" name="billState" id="billState"/> 
<input type="text" name="billZip" id="billZip"/> 
</div> 
</div> 
</form> 
</div> 
</div> 


</body> 
</htmil> 


我 们 不 会 过 多 地 讨论 该 页 面 的 操作 , 因为 这 相当 简单。 这 个 页 面 真 正 令 人 感 兴趣 的 地 方 只 有 
一 处 : 在 就 绪 处 理 硕 中 附加 到 复 选 框 的 单 击 处 理 问 。 当 通过 单 击 改变 复 选 框 的 状态 时 ,我 们 以 下 
3 件 事情 。 

(1) 将 选中 状态 复制 到 参数 same， 以 便 在 监听 需 的 其 余部 分 中 引用 。 

(2) 设置 账单 地 址 字段 的 值 。 如 采 和 送 赁 地 址 相同 ， 束 将 送 赁 地 址 信息 里 的 相应 字段 的 值 复 
制 到 账单 地 址 字段 ; 否则 清空 账单 地 址 字段 。 

(3) 在 所 有 在 账单 地 址 容 需 中 的 输入 杠 上 调用 新 的 setReadOnly () 方法 。 

哎呀 ! 我 们 在 最 后 一 步 有 点 粗心 了 。 使 用 $s ('#bi1llingAddress input') 创 建 的 包装 集 不 
仪 包含 账单 地 址 块 里 的 文本 字段 ,也 包含 复 选 框 。 复 选 框 元 紊 没有 只 读 语 义 , 但 是 它 的 不 透明 度 
可 以 被 改变 一 一 但 这 绝 不 是 我 们 的 本 意 ! 

午 运 的 是 , 在 定义 插件 的 时 候 我 们 没有 粗心 , 才 化 解 了 这 个 玖 涯 。 还 记得 在 setReadonly () 
方法 中 应 用 别 的 方法 之 前 , 就 过 滤 挥 了 除 文本 字段 以 外 的 所 有 字段 ,我 们 非常 赞同 对 细 市 的 关注 ， 
尤其 是 对 于 打算 提供 给 公众 使 用 的 插件 。 

可 以 从 哪些 方面 对 这 个 方法 进行 改进 呢 ? 考虑 进行 下 列 修改 。 

口 我 们 忘 了 文本 区 了 ! 如 何 修改 代码 以 便 同 时 包含 文本 字段 和 文本 区 ? 

口 在 两 种 状态 "下 应 用 到 字段 的 不 透明 度 水 平 都 是 被 硬 编码 到 函数 中 的 。 这 对 调用 者 不 太 友 

好 。 修 改 这 个 方法 以 便 允 许 调 用 者 提供 不 透明 上 度 水 平 。 























J 只 读 状 态 或 者 非 只 读 状态 。 
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口 噢 ， 糟 糕 ， 为 什么 要 强迫 开发 者 接受 只 能 改变 不 透明 度 功能 呢 ? 如 何 修改 这 个 方法 让 开 
发 者 可 以 决定 字段 在 两 种 状态 下 的 表现 形式 呢 ? 
下 面 来 看 一 个 更 加 复杂 的 插件 。 


7.4.2 保留 在 包 泌 器 方法 里 的 状态 


每 个 人 都 喜欢 约 灯 片 ! 

至 少 在 Web 上 如 此 。 不 同 于 晚餐 结束 后 的 倒霉 客人 ， 被 迫 耐 着 性 子 看 完 信 人 头骨 脑 胀 没完 
没 了 且 是 毫 无 重点 的 度假 照片 展 ，Web 幻灯 片 的 访问 者 只 要 乐意 就 可 以 随时 离开 , 不 会 伤害 任何 
人 的 感情 ! 

作为 更 复杂 的 插件 示例 ， 我 们 将 会 开发 一 个 jQuery 方法 来 允许 Web 开发 者 轻松 地 创建 灵巧 
的 幻灯 片 放映 页 面 。 我 们 将 创建 一 个 名 为 Photomatic 的 jQuery 插件 ， 然 后 生成 测试 页 面 来 分 步 
测试 这 个 插件 。 人 完成 后 的 测试 页 面 如 图 7-2 所 示 。 


OO Phoromatc Test 


gp 











2 hw//ocalhosyiqiaz/chapter7 /phoromaric/ phoromatic_htmi 


| 
, Photomatic Tester Ss 1 起 





图 7-2 用 来 分 步 测试 Photomatic 插件 的 测试 页 面 





这 个 页 面 运用 了 以 下 组 件 : 

口 一 组 缩 略 网 ; 

口 可 以 从 缩 略图 列表 里 获取 的 一 幅 图 片 的 全 尺寸 照片 ; 

口 一 组 按钮 用 来 手动 播放 幻灯 片 以 及 开始 和 停止 目 动 播放 幻灯 片 。 
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这 个 页 面 的 行为 如 下 。 

口 单 击 任何 缠 略 图 就 会 显示 相应 的 全 尺寸 图 片 。 
口 蛙 击 全 尺寸 图 片 束 会 显示 下 一 幅 图 片 。 

口 单 击 按钮 就 会 执行 相应 的 操作 : 








@ First 显示 第 一 幅 图 片 ; 
@ Previous 显示 上 一 幅 图 片 ; 





四 Next- 一 一 显示 下 一 幅 网 请; 





国 Last 显示 最 后 一 幅 图 片 ; 
四 Play 一 一 开始 目 动 播放 照 请 直到 再 次 单 击 。 





口 任何 经 过 图 片 列表 末尾 的 操作 都 会 折 回 到 为 一 问 。 在 最 后 一 幅 图 片 出 现时 单 击 Next 按钮 
就 会 显示 第 一 幅 图 片 ， 反 之 亦 然 。 

我 们 也 想 赋予 Web 开发 者 尽 可 能 多 的 自由 来 布局 页 面 和 设计 样式 。 我 们 将 定义 插件 ， 以 便 
开发 者 能 够 以 喜欢 的 方式 来 创建 元 系 , 然后 告诉 我 们 哪个 页 面 元 系 应 该 用 于 哪个 目的 .不止 如 此 ， 
为 了 给 Web 开发 者 尽 可 能 多 的 回旋 余地 ， 我 们 将 定义 插件 ， 以 便 开发 者 能 够 提供 任何 图 片 包装 
集 作 为 缩 略图 列表 。 通 筑 ， 缩 略 网 会 集中 在 一 起 ， 束 像 测试 页 面 那样 ， 但 是 开发 者 可 以 目 由 地 把 
页 面 上 的 任何 图 刻 当 作 纵 略图 。 

首先 介绍 Photomatic 插件 的 语法 。 











方法 语法 : photomatic 
photomatic (options) 
设置 缩 略图 包装 集 以 及 在 options 散 列 对 象 里 标识 的 页 面 元 素 , 将 它们 作为 Photomatic 的 
控件 进行 操作 





参数 
options ( 对象 ) 指定 photomatic 的 各 种 设置 的 散 列 对 象 。 参见 表 7-] 以 了 解 细 书 
返回 值 
包装 集 





因为 要 用 到 许多 重要 的 参数 来 控制 photomatic 的 操作 (其 中 很 多 参数 可 以 省 略 )， 所 以 使 
用 散 列 对 象 来 传递 这 些 参数 ， 我 们 曾 在 7.2.3 市 中 讨论 过 。 可 以 指定 的 选项 如 表 7-1 所 示 。 


表 7-1 Photomatic 自 定义 插件 方法 的 选项 

















选项 名 称 描述 
firstControl ( 选择 器 | 元 素 ) 作为 First 控 件 的 元 素 引用 或 用 来 标识 DOM 元 素 的 jQuery 选择 器 。 如 果 省 
略 ， 则 不 设置 控件 
lastControl ( 选择 器 | 元素 ) 作 为 Last 控 件 的 元 素 引用 或 用 来 标识 DOM 元 素 的 jQuery 选择 器 。 如果 省 略 ， 
则 不 设置 控件 
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( 绥 ) 
选项 名 称 描述 
nextControl (选择 器 | 元 素 ) 作 为 Next 控 件 的 元 素 引 用 或 用 来 标识 DOM 元 素 的 jQuery 选择 器 。 如果 省 略 ， 

则 不 设置 控件 

photorlement (选择 融 | 元 素 ) 作为 全 尺寸 照片 显示 的 元 妹 引用 或 用 来 标识 <img> 元 素 的 jQuery 选择 途 。 如 
果 省 略 ， 则 默认 为 jQuery 选择 需 img .photomaticPhoto 

playControl (选择 融 | 元 素 ) 作 为 Play 控件 的 元 素 引 用 或 用 来 标识 DOM 元 对 的 jQuery 选择 希 。 如 果 省 略 ， 
则 不 设置 控件 





previousControl (选择 需 | 元 率 ) 作为 Previous 控 件 的 元 素 引 用 或 用 来 标识 DOM 元 素 的 jQuery 选择 希 。 如 
果 省 略 ， 则 不 设置 控件 





transformer (因数 ) 用 来 将 缩 略 图 片 的 URL 转 换 为 相应 的 全 尺寸 图 片 的 URL。 如 果 省 略 ， 则 默认 将 URL 
中 所 有 的 thumbnail 替 换 为 photo 
delay (数字 ) 约 灯 片上 自动 播放 时 切换 照片 的 间隔 时 间 〈 以 毫秒 为 单位 ) 。 默 认为 3 000 


出 于 对 “测试 驱动 开发 ”理念 的 认同 ,在 着 手 创建 Photomatic 插件 之 前 ， 先 来 为 这 个 插件 
创建 测试 页 面 。 该 页 面 的 代码 如 代码 清单 7-5 所 示 ， 可 以 从 文件 chapter7/photomatic/photomatic. 
html 获取 。 


代码 清单 7-5 ”用 来 创建 如 图 7-2 所 示 的 Photomatic 的 测试 页 面 
<1DOCTYEPEE html> 
<html> 
<head> 
<title>Photomatic Test</title> 
<link rel="stylesheet" type="text/css" 
href="../../styles/core.css'"> 
<link rel="stylesheet" type="text/css" href="photomatic.css"> 
<script type="text/javascript" 
src="../../scripts/jaquery-1.4.js"></script> 
<script type="text/javascript" 
src="jquery.jqia.photomatic.js"></script> 
<script type="text/javascript"> 
tone lenl | 调用 Photomatic 插件 
$s('#thumbnailsPane img') .photomaticl(t 
PhotoElement: '#photoDisplay', 
PreviousControl: '#¥previousButton', 
nextControl: '#nextButton', 
firstControl: '#firstButton', 
lastControl: '#lastButton', 
playControl: '#playButton', 
delay: 1000 
1 
1 
</script> 
</head> 
<body class="fancy"> 


<div id="pageContainer"> 
<div id="pageContent"> 
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0 包含 缩 略 图 
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<div id="thumbnailsPane"> 

<img src="thumbnails/IMG 2212.jpg"/> 

<img src="thumbnails/IMG 2222.jpg"/> 

<img src="thumbnails/IMG 2227.jpg"/> 

<img src="thumbnails/IMG 2235.jpg"/> 

<img src="thumbnails/IMG 2259.jpg"/> 

<img src="thumbnails/IMG 2269.jpg"/> 

<img src="thumbnails/IMG 2273.jpg"/> 

<img src="thumbnails/IMG 2287.jpg"/> 

<img src="thumbnails/IMG 2292.jpg"/> 

<img src="thumbnails/IMG 2296.jpg"/> 

<img src="thumbnails/IMG 2298.jpg"/> 

<img src="thumbnails/IMG 2302.jpg"/> 

<img src="thumbnails/IMG 2310.jpg"/> 

im Sros"thumbnalles/INMG 2319 ,Jpg9"/S 

<img src="thumbnails/IMG 2331.jpg"/> 

<img src="thumbnails/IMG 2335.jpg"/> 
-0 定义 全 尺寸 照片 图 片 元 素 
<diyv 1id="photoPpane"> 下 

<img id="photoDisplay" Src=""/» 
</div> 0 包含 作为 控件 的 元 素 
<div id="buttonBar'"> 

<img src="button.placeholder.png" id="firstButton" 

alt="First" title="First photo"/> 
<img src="button.placeholder.png" id="previousButton" 


alt="Previous" title="Previous photo"/> 


<ijmg src="button.placeholder.png" id="playButton" 
alt="Play/Pause" title="Play or pause slideshow"/> 
<img src="button.placeholder.png" id="nextButton" 


alt="Next" title="Next photo"/> 


<img src="button.placeholder.png" id="lastButton" 
alt="Last" title="Last photo"/> 
</div> 
</div> 
</div> 
</body> 
</html> 





如 果 这 看 起 来 比 你 认为 的 简单， 也 不 用 惊讶 。 通 过 应 用 不 唐 突 的 J avaScript 原则 并 将 所 有 的 
样式 信息 保存 在 外 部 样式 表 里 , 标记 整齐 而 简单 。 事实 上 , 页面 上 的 脚本 由 调用 插件 的 单个 语句 
组 成 ， 内 存 占用 很 少 。 

HTML 标记 由 保存 缩 略 图 的 容 咒 @、 保 存 全 尺寸 照片 的 图 片 元 素 (初始 src 特性 为 空 
以 及 控制 幻灯 片 播 放 的 一 组 按钮 @ 组 成 。 其 他 事情 都 由 新 插件 来 处 理 。 














) ©@, 








下 面 就 来 开发 新 插件 吧 。 
自 完 搭建 框架 ( 随后 会 逐步 填充 细节 )。 目 前 的 起 点 应 该 看 起 来 很 熟悉 ， 因 为 它 遵 循 我 们 一 
直 以 来 使 用 的 模式 。 
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(function(S$)t 
$s.fn.photomatic = function(options) { 
及 
站 RUeey 
这 段 代 码 定 义 初 始 为 空 的 包装 融 困 数 ， 它 接受 名 为 options 的 单个 散 列 参数 ( 和 语法 描述 
的 一 样 )。 首 先 ， 在 果 数 主体 的 内 部 ， 我 们 把 这 些 调 用 者 设置 的 参数 与 表 7-1 所 描述 的 默认 设置 
合并 起 来 ， 得 到 一 个 可 以 在 方法 的 剩余 代码 中 引用 的 单个 settings 对 象 
使 用 下 列 的 习惯 用 法 来 执行 这 个 合并 操作 ( 我 们 已 经 看 到 过 几 次 了 ): 
Var settings = S$S.extengdl(t 
PhotoElement: 'img.photomaticPhoto', 











transformer: function(name) { 
return name.replace(/thumbnail/, 'photo').; 
5 
nextControl: null, 
PreviousControl: null, 
firstControl: null, 
JastControl: null, 
playControl: null, 
delay: 3000 
-oneione| | C7) 


在 这 个 语句 执行 之 后 ，settings 变量 将 会 包含 内 联 散 列 对 象 提供 的 黑 认 信 ， 这 个 默认 值 会 
锌 调用 者 提供 的 值 所 窗 盖 。 虽 然 没 必要 包含 无 默认 值 的 属性 ( 值 为 null 的 属性 )， 但 是 为 了 文 
档 编 写 的 目的 ， 我 们 党 得 列 出 所 有 可 能 的 设置 是 有 用 和 明智 的 。 

还 有 儿 件 事情 需要 跟踪 。 为 了 让 控件 知道 “下 一 幅 ” 图 片 和 和 “上 一 幅 ” 图 片 的 意思 ， 不 仪 需 
要 一 个 由 织 略 图 组 成 的 有 序列 表 ， 还 需要 一 个 用 来 找 出 “当前 显示 ”图 片 的 指示 帮 。 

缩 略 图 列表 就 是 这 个 方法 正在 (或 者 至 少 应 该 是 ) 操作 的 对 象 。 我 们 不 知道 开发 者 在 包 交 集 
里 收集 了 什么 ， 因 此 想 第 选 出 图 片 元 杂 ， 这 个 操作 可 以 很 容易 地 通过 jQuery 选择 天 来 实现 。 但 
是 应 该 在 哪里 存储 这 个 列表 呢 ? 

可 以 创建 男 一 个 变量 来 保存 缩 上 略图 列表 , 但 是 集中 存储 可 能 会 更 好 。 下 面 将 该 列表 作为 另 一 
个 属性 保存 到 settings 上 ， 如 下 所 示 : 

settings.thumbnailss = this.filter('img'); 

从 包装 集中 过 小 图 片 元 素 ( 在 方法 内 可 以 通过 this 访问 ) 来 生成 一 个 新 包装 集 ( 只 包含 
<img> 元 素 )， 这 个 新 包 疙 集 被 存储 在 settings 的 一 个 名 为 thumbnails$ 的 属性 中 (尾部 的 $ 
符号 是 一 种 约定 的 写法 ， 用 来 表示 这 是 一 个 对 包 沪 集 的 存储 引用 )。 

为 一 个 需要 跟踪 的 状态 是 当前 图 片 。 通 过 给 settings 添加 另 一 个 名 为 current 的 属性 来 
保持 缩 略 图 列表 的 下 标 ， 以 便 跟 踪 当 前 图 厂 : 

settings.current = 0; 

关于 缩 略 网 还 有 一 个 步骤 需要 完成 。 如 采 通 过 跟踪 下 标 来 跟踪 当前 的 照 请, 那么 至 少 还 有 一 
种 情况 (我们 很 快 就 会 考察 到 )， 即 在 给 予 缩 略 图 元 素 引 用 的 情况 下 ， 我 们 需要 知 着 该 缩 略 图 元 
素 的 下 标 。 最 简单 的 处 理 办 法 是 预先 考虑 这 个 需求 ， 并 使 用 便捷 的 jQuery 的 aata() 方 法 在 每 个 
缩 略 图 元 素 上 记录 缩 略 图 的 索引 。 使 用 以 下 语句 可 以 完成 这 一 任务 : 
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settings.thumbnailss 
.each( 
function(n){ S(this) .data('photomatic-index',n); } 


) 

这 个 语句 遍历 每 一 个 缩 上 略图 元 素 ， 给 每 个 图 片 添 加 名 为 photomatic-index 的 数据 元 素来 
记录 其 在 列表 里 的 下 标 。 既 然 已 经 设置 了 初始 状态 , 我 们 就 可 以 瑚 看 插件 的 核心 内 容 前 进 
置 控 件 、 缩 略图 以 及 照片 显示 。 

等 一 下 ! 初始 状态 ?我 们 怎么 能 够 期 望 在 就 要 结束 执行 的 函数 内 使 用 本 地 变量 来 跟踪 状态 
呢 ?” 当 函数 返回 时 ， 这 个 变量 和 所 有 的 设置 不 都 超出 作用 域 了 吗 ? 

通常 这 可 能 是 正确 的 , 但 是 还 有 一 种 情况 ， 当 变量 作为 闭 包 的 一 部 分 的 时 候 , 这 种 变量 会 比 
在 通常 的 作用 域 中 保存 得 更 久 。 之 前 已 经 了 解 过 闭 包 , 不 过 如 果 你 仍然 对 闭 包 心 存 疑虑 ,请 复习 
附录 的 内 容 。 你 必须 理解 闭 包 ， 不 仅 是 为 元 克 Photomatic 插件 的 实现 ， 也 是 为 了 创建 一 些 至 
关 重 要 的 插件 。 

在 考虑 剩余 的 工作 时 , 我 们 认识 到 需要 附加 大 量 事件 监听 带 到 控件 和 元 素 上 , 目前 为 止 为 了 
识别 这 些 控件 和 元 系 我 们 钱 费 否 心 。 因为 当 声 明 监 折 问 函数 的 时 候 settings 变量 是 在 作用 域内 
的 ， 所 以 每 个 监听 需 将 会 成 为 包含 settings 变量 的 闭 包 的 一 部 分 。 因此 可 以 放心 ， 即使 
settings 变量 看 起 来 可 能 是 暂时 存在 的 ,但 是 它 所 代表 的 状态 将 会 一 下 存在 并 且 可 供 所 有 定义 
的 监听 娇 使用。 

说 到 监听 硕 ， 下 面 列 出 了 需要 附加 到 不 同 元 了 水 上 的 click 事件 监 昕 和 冀 。 

口 单 击 一 张 缩 略 图 照 请 将 会 导致 其 全 尺寸 版 本 显示 出 来 。 

口 单 击 全 尺寸 照片 将 会 显示 下 一 幅 照 厂 。 

口 单 击 定义 为 Previous 控件 的 元 素 将 会 显示 上 一 幅 图 片 。 

口 单 击 Next 控件 将 会 显示 下 一 幅 图 片 。 

口 单 击 First 控件 将 会 显示 列表 里 的 第 一 幅 图 片 。 

口 单 击 Last 控件 将 会 显示 列表 里 的 最 后 一 幅 图 片 。 

口 单 击 Play 控件 将 会 开始 自动 播放 幻灯 片 ， 播 放 时 使 用 在 设置 里 定义 的 延迟 时 间 。 随 后 青 

次 单 击 控件 会 俘 止 播放 约 灯 万。 

观察 这 个 列表 , 我 们 马上 就 会 注意 到 所 有 的 这 些 监 昕 疾 都 有 一 个 共同 点 : 它们 都 必须 显示 缩 
略图 对 应 的 全 尺寸 照 瞩 。 作 为 优秀 而 聪明 的 程序 员 , 我 们 想 把 上 述 共同 的 处 理 提取 出 来 封装 到 一 
个 函数 里 ， 这 样 就 不 用 一 人 壳 义 一 人 过 地 重复 编写 同样 的 代码 了 。 

但 是 如 何 实 现 呢 ? 

如 有 果 在 编写 常规 的 页 面 上 的 JavaScript 代码 ， 那 就 可 以 定义 顶级 函数 ; 如 果 编 写 的 是 面 加 对 
象 的 JavaScript， 那 就 可 以 在 JavaScript 对 象 上 定义 方法 。 但 是 我 们 编写 的 是 一 个 jQuery 插件 。 
应 该 在 哪里 定义 实现 函数 呢 ? 

我 们 不 想 为 了 只 应 该 从 插件 代码 内 部 调用 的 函数 而 侵占 全 局 命名 空间 或 $ 命 名 空间 ， 那 能 做 
什么 呢 ?” 响 ,为 目前 的 难题 再 添加 一 个 需求 ， 让 了 哨 数 参与 到 包含 settings 变量 的 闭 包 中 ,这 样 
就 不 用 将 settings 变量 作为 参数 传递 到 每 次 的 调用 中 了 。 





设 















































图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 





210 第 7 章 扩展 jQuery 





JavaScript 作为 一 种 函数 式 语 言 的 能 力 再 次 拯救 了 我 们 ， 它 允许 我 们 在 插件 函数 的 内 部 定义 
这 个 新 图 数 。 通 过 这 样 做 , 我 们 将 这 个 新 函数 的 作用 域 限制 在 插件 孔 数 内 部 (我 们 的 目标 之 一 ) ， 
并 且 因 为 settings 变量 处 于 这 个 作用 域内 ,所 以 它 与 新 函数 形成 了 一 个 闭 包 (我们 的 男 一 目标 )。 
难道 还 有 更 简单 的 办 法 呢 ? 

因此 我 们 在 插件 函数 内 部 定义 一 个 名 为 showPhoto() 的 函数 ， 它 接受 一 个 指示 缩 略 图 ( 它 
的 全 尺寸 照片 将 被 显示 ) 下 标的 单个 参数 ， 如 下 所 示 : 


function ShowPhoto (index) { 








$s (settings.photoEl]ement) 
.attr('src', 
settings.transformer (settings.thumbnailss$ [index] .src)); 
settings.current = index; 


}; 
当 传 人 缩 略 网 的 index 时 (其 相应 的 全 尺 二 照片 将 被 显示 ) ， 这 个 新 函数 会 使 用 settings 
对 象 里 的 值 完 成 下 述 操作 ( settings 对 象 可 以 从 通过 函数 声明 创建 的 财 包 里 获取 ) : 

(1) 查找 通过 index 识别 的 缩 略 图 的 src 特性 ; 

(2) 传递 src 特性 值 到 transformer 因数 来 把 它 从 缩 略 图 URL 转换 到 全 尺寸 图 URL; 

(3) 把 转换 结果 赋值 给 全 尺寸 图 片 元 素 的 src 特性 ; 

(4) 记录 被 显示 照片 的 下 标 为 新 的 当前 下 标 。 

有 了 这 个 便捷 的 国 数 ,我 们 瓯 可 以 定义 前 面 列 出 的 监听 硕 了 。 下 面 从 设置 缩 略 图 开始 ， 只 需 
要 能 够 引发 缩 略 图 相应 的 全 尺寸 照片 显示 出 来 即 可 。 把 对 click() 函数 调用 的 语句 和 前 面 引 用 
settings.thumbnailss$ 的 语句 链接 起 来 ， 如 下 所 示 : 


.Click(function()t{ 
showPhoto(s (this) .data('photomatic-index')).; 
}); 


在 这 个 处 理 硕 中 ， 我 们 获取 了 缩 略 图 下 标的 值 (已 经 保存 到 photomatic-index 数据 元 
对 里 ) ， 并 使 用 这 个 值 来 调用 showPhoto() 困 数 。 这 个 处 理 融 证 明了 之 前 编写 的 设置 是 非常 
成 功 的 ! 
设置 照片 显示 元 素来 显示 列表 里 的 下 一 张 照 片 也 很 简单 : 
$s (settings.photoElement,) 
.attr('title', 'Click for next Photo ' ) 
.CSS('cUursor', 'pointer') 
.Click(function()t 


ShowPhotol( (settings.current+1) % settings.thumbnailss.1length).; 


JJ 
我 们 特意 在 照 请 上 添加 了 一 个 title 特性 ， 这 样 用 户 就 知道 单 击 当 前 照片 将 会 播放 下 一 张 
照 户 ， 并 且 还 设置 了 光标 用 来 指示 元 素 是 可 单 击 的 。 
然后 创建 一 个 单 击 处 理 融 ， 在 其 中 用 下 一 个 下 标 值 来 调用 showPhoto () 困 数 
是 如 何 使 用 JavaScript 取材 操作 符 〈s# ) 来 在 超出 列表 长 度 的 时 候 回 到 列表 的 开始 位 置 。 
First、Previous 、Next 和 Last 控件 的 处 理 需 都 脖 循 类 似 的 模式 : 找 出 合适 的 缩 略 图 (其 对 应 
的 全 尺寸 照 三 将 会 被 显示 ) 下 标 ， 然 后 用 该 下 标 来 调用 showPhoto () : 












































注意 我 们 
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Ss(settings.nextControl) .click (function()t 
showPhotol( (settings.current+1) % settings.thumbnailss.1length).; 
人 
Ss(settings.previousControl) .click(function()t 
ShowPhoto( (settings.thumbnailss.length+settings.current-1) % 
settings.thumbnailss.length).; 
i 
Ss(settings.firstControl) .click(function()t 
showPhoto(0).; 
Fs 
Ss(settings.lastControl) .click (function()t{ 
showPhoto (settings.thumbnailss .length-1); 
J 


Play 控件 的 设置 更 加 复杂 一 些 。 这 个 控件 必须 局 动 一 个 届 历 整个 照 请 集 的 进程 ， 而 不 是 显示 
张 特定 的 上 照片， 再 次 单 击 时 会 停止 这 个 进程 。 下 面 来 看 一 下 用 来 实现 这 个 过 程 的 代码 : 
$s (settings.playControl) .togglel( 
function (event)t 











settings.tick = window.setInterval( 
function()t 
Ss(settings.nextControl) .triggerHandler('click') 
}, 
settings.delay).; 
S (event.target) .addClass('photomatic-playing'); 
Ss (settings.nextControl) .click(); 
}, 
function(event)t 
window.clearIinterval (settings.tick),; 
S$ (event.target) .removeClass('photomatic-playing'); 
} 
) > 


首先 , 注意 所 使 用 的 jQuery 的 toggle () 方 法 在 每 隔 一 次 单 击 控件 时 可 以 在 两 个 不 同 的 监听 
希 之 间 切 换 。 这 样 承 避 免 了 目 己 确认 是 该 开始 播放 还 是 停止 播放 幻灯 万。 

在 第 一 个 处 理 带 中 ,我们 使 用 JavaScript 提供 的 setInterval () 方 法 使 一 个 水 数 在 delay 
间隔 中 持续 触发 。 我 们 将 间 阳 计时 如 对 象 保存 在 settings 变量 中 供 以 后 引用 。 

我 们 也 给 Play 控件 添加 了 类 photomatic-playing, 这样 Web 开发 者 可 以 使 用 CSS 来 改变 其 样 
式 了 (如 果 和 需要 的 话 )。 

作为 处 理 需 里 的 最 后 一 个 动作 ， 我 们 在 Next 控件 上 模拟 了 一 个 单 击 来 立即 推进 到 下 一 张 照 
厂 (而 不 是 要 等 到 第 一 个 时 间 间 隔 结 束 ) 。 

在 toggle() 调 用 的 第 二 个 处 理 需 中 ,我 们 想 要 停止 幻灯 片 播放 ,因此 使 用 clearInterval () 
清空 了 间隔 计时 需 对 象 并 且 从 Play 控件 上 删除 了 类 photomatic-playing。 

我 打赌 你 不 会 想到 它 是 这 么 简单 。 

在 宣布 成 功 之 前 ,还 有 两 个 最 后 的 任务 : 我 们 需要 在 任何 用 户 探 作 前 显示 第 一 张 照片， 而 且 
还 需要 返回 原始 的 包装 集 以 便 我 们 的 插件 可 以 参与 到 jQuery 方法 链 中 。 可 以 使 用 以 下 代码 完成 
上 述 任务 : 


ShowPhoto (0) ; 
return this,; 
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跳 个 简短 的 庆功 舞 吧 ， 我 们 终于 完成 了 1! 
完整 的 插件 代码 如 代码 清单 7-6 所 示 ， 也 可 以 从 文件 chapter7/photomatic/jquery.jqia.photomatic.js 
获取 O 


代码 清单 7-6 ”Photomatic 插件 的 完整 实现 
(function(s$)t 


$s.fn.photomatic = function(options) { 
Var settings = S$.extendlt 
PhotoElement: 'img.photomaticPhoto', 
transformer: function(name) { 
return name.replace(/thumbnail/, 'photo'); 
}, 
nextControl: null, 
PreviousControl: null, 
firstControl: null, 
JastControl: null, 
playControl: null, 
delay: 3000 
-opt ems 171} 
function showPhoto(index) { 
$s (settings.photoElement) 
.attr('src', 
settings.transformer (settings.thumbnailss[index] .src)); 
settings.current = index:; 
} 
settings.current = 0; 
settings.thumbnailss = this.filter('img').; 
settings.thumbnailss 
.each ( 
function(n){ S(this) .data('photomatic-index',n); } 
) 
.click(function()t 
showPhoto(s (this) .data('photomatic-index')); 
了 
Ss (settings.photoElement) 
.attr('title','Click for next photo') 
.CSs('cursor', 'pointer') 
.click(function()t 
showPhotol( (settings.current+1) % settings.thumbnailss.1length).; 
了 
S(SsSettings .nextControl) .click(function()t 
showPhotol( (settings.current+1) % settings.thumbnailss.1length); 
ls 
$s (settings.previousControl) .click(function()t 
showPhoto( (settings.thumbnailss.length+settings.current-1) % 
settings.thumbnailss.1length).; 
1 
Ss (settings.firstControl) .click(function()t 
showPhoto(0).,; 
站 
$s(settings.l]astControl) .click(function()t 
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showPhoto(settings.thumbnailss$.length-1).; 
}); 
$s (settings.playControl) .toggle!l( 
function(event)t 
settings.tick = window.setInterval ( 
function(){ S$(settings.nextControl) .triggerHandler('click'); }, 
settings.delay); 
S (event.target) .addClass ('photomatic-playing').; 
$s(settings.nextControl) .click().; 
ja 
function(event)t 
window.clearIinterval (settings.tick); 
S (event.target) .removeClass('photomatic-playing'); 
}); 
ShowPhoto (0O ) ; 
return this; 
}; 
(IOUSry): 
这 使 用 jQuery 代码 的 典型 插件 ， 它 在 简洁 的 代码 里 包含 了 强大 的 功能 。 它 展示 了 一 套 重要 
的 技巧 一 一 使 用 闭 包 回 越 jQuery 插件 的 作用 域 来 维持 状态 ,以 及 启用 可 以 由 插件 来 定义 和 使 用 的 
私有 实现 孔 数 的 创建 ， 而 无 需 侵占 任何 命名 空间 。 
男 外 请 注意 ， 因 为 我 们 没有 让 状态 从 插件 中 “泄漏 ”出 去 ,所 以 可 以 在 页 面 上 自由 地 添加 任 
意 数 量 的 Photomatic 部 件 ， 而 不 用 担心 这 些 部 件 互相 干扰 ( 当然 也 要 小 心 , 不 要 在 标记 里 使 用 
重复 的 id 值 )。 
但 这 就 算 完成 了 吗 ? 这 由 你 决定 ， 也 可 以 思考 以 下 练习 。 
口 再 次 强调 ， 错 误 检 测 和 处 理 没 有 被 包含 其 中 。 你 应 该 如 何 做 来 让 这 个 插件 尽 可 能 地 无 懈 
可 击 ? 
口 照片 之 间 的 过 渡 是 瞬间 发 生 的 。 利 用 你 在 第 5 章 中 学 到 的 知识 来 修改 插件 ， 让 照 厂 以 淡 
人 淡出 的 方式 过 渡 到 下 一 张 。 
口 更 进一步 ， 你 应 该 如 何 让 开发 者 使 用 上 自 定 义 动画 呢 ? 
口 为 了 最 大 限度 的 灵活 性 ， 我 们 编写 了 这 个 插件 来 设置 已 经 被 用 户 创建 的 HTML 元 素 。 
如 何 创建 一 个 类 似 的 插件 (但 拥有 更 少 的 显示 自由 度 ) 来 动态 生成 所 有 需要 的 HTML 元 
素 呢 ? 
你 现在 已 经 整装待发 ， 可 以 去 编写 自己 的 jQuery 插件 。 如 果 发 现 了 一 些 有 用 的 插件 ， 可 以 
与 jQuery 社区 的 其 他 用 户 分 享 。 访 问 http://plugins.jquery.com/ 以 获取 更 多 信息 。 


7.5 ”小结 


本 草 介 绍 了 如 何 编写 用 来 扩展 jQuery 的 可 重用 代码 。 

把 目 己 的 代码 编写 为 jQuery 扩展 有 许多 优点 。 这 不 仅 可 以 在 Web 应 用 中 保持 代码 的 一 致 性 
(无 论 使 用 的 是 jQuery API 还 是 目 定义 API), 还 可 以 使 我 们 的 代码 充分 利用 jQuery 提供 的 所 有 强 
大 功能 。 
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遵循 一 些 命名 规则 可 以 帮助 避免 文件 名 之 间 的 命名 冲突 ， 也 可 以 避免 页 面 重新 指定 $ 时 可 能 
会 产生 的 问题 。 

创建 新 的 实用 子 数 就 像 在 $ 上 创建 新 的 函数 属性 一 样 简 单 ， 而 新 的 包装 右 方 法 可 以 简单 地 创 
建 为 .fn 的 属性 。 

如 果 插 件 创作 激发 了 你 的 兴趣 , 我 们 强烈 建议 你 去 下 载 和 熟悉 已 有 的 插件 代码 , 看 看 插件 作 
者 们 是 如 何 实现 插件 功能 的 。 你 将 会 看 到 本 章 所 阐述 的 技巧 是 如 何在 插件 代码 中 被 广泛 使 用 的 ， 
并 且 会 学 到 本 书 范围 外 的 新 技巧 。 

还 有 更 多 的 jQuery 知识 可 供 运 用 , 接 下 来 开始 学 习 jQuery 是 如何 把 Ajax 合并 到 交互 应 用 中 ， 
就 像 “ 不 用 脑子 ”那样 简单 。 
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本 章 内 容 

口 Ajax 概述 

口 从 服务 硕 加 载 预定 义 格式 的 HTML 
口 发 起 常规 的 cET 和 PosT 请 求 

口 对 请 求 进行 细 粒 度 的 控制 

口 设置 默认 的 Ajax 属性 

口 处 理 Ajax 事件 


没有 哪 种 单项 的 技术 手段 比 Ajax 更 能 改变 Web 的 外 观 ， 这 是 毫 无 委 以 的 。 无 需 重 新 加 载 整 
个 页 面 就 可 以 回 服务 天 发 起 异步 请 求 的 能 力 ， 开 局 了 一 整套 完全 轿 新 的 用 户 交 互 范例 并 且 使 得 
DOM 脚本 的 应 用 成 为 可 能 。 

Ajax 添加 到 Web 工具 箱 的 时 间 比 很 多 人 认为 的 要 早 。 早 在 1998 年 ， 微 软 就 引入 了 一 个 
ActiveX 控件 ， 从 而 能 够 在 脚本 控制 下 执行 异步 请 求 (不 考虑 使 用 <iframe> 元 素 实现 这 种 活动 的 
情况 ), 作为 所 创建 OWA”( Outlook Web Access ) 的 一 部 分 。 尽 管 OWA 取得 了 一 定 程 度 的 成 功 ， 
但 是 似乎 很 小 有 人 关注 其 中 潜在 的 技术 。 

几 年 过 去 了 ， 一 些 事件 使 得 Ajax 进入 了 Web 开发 社区 的 集体 意识 。 几 个 非 微软 浏览 吉 将 该 
技术 的 标准 化 版 本 实现 为 XMLHttpRequest (XHR ) 对 象 。Google 开始 使 用 XHR。 在 2005 年 ， 
Adaptive Path 的 Jesse James Garrett 创造 了 术语 Ajax (Asynchronous JavaScript and XML ， 异 步 的 
JavaScript 与 XML )。 

好 像 只 是 为 了 等 待 给 这 门 技术 赋予 一 个 吸引 人 的 名 称 ，Ajax 迅速 地 说 得 了 Web 开发 人 员 的 
广泛 关注 ， 成 为 了 开局 DOM 脚本 应 用 主要 工具 之 一 。 

本 章 , 我 们 将 简要 浏览 Ajax ( 如 果 你 已 经 是 Ajax 专家 , 可 以 跳 到 8.2 节 ), 然后 看 看 jQuery 
如 何 让 使 用 Ajax 易如反掌 。 

下 面 完 回顾 一 下 Ajax 技术 到 底 是 什么 样 的 技术 。 
































中 通过 Web 浏览 絮 ( 而 非 Outlook 客户 端 ) 来 访问 微软 Exchange Server 邮箱 的 方式 。 
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8.1 回顾 Ajax 


尽管 我 们 会 在 本 方 中 快 速 浏览 Ajax， 但 请 注意 ， 这 节 内 容 不 能 作为 一 个 完整 的 Ajax 指南 或 
者 Ajax 初级 谈 本 。 如 采 你 完全 不 玖 悉 Ajax (甚至 更 糟 ， 认 为 我 们 在 谈论 一 种 洗 洁 精 或 者 一 个 虚 
构 的 希腊 喘 雄 )， 我 希望 你 学 习 关 于 Ajax 的 一 些 资 源 来 熟悉 这 门 技术 。Manning 的 图 书 hjax in 
Action 和 Ajax in Practice" 都 是 优秀 的 范例 。 

有 些 人 可 能 会 争论 说 , 术语 Ajax 指 的 是 无 需 刷新 面 铝 用 户 的 页 面 就 能 发 出 服务 右 请 求 的 所 有 
方法 ( 例如 问 隐 藏 的 <iframe> 元 素 提 交 请 求 ), 但 是 大 部 分 人 将 这 个 术语 与 使 用 xMLHttpRequest 
( XHR ) 或 者 微软 的 XMLHTTP ActiveX 控件 的 行为 联系 在 一 起 。 

总 体 流 程 图 如 图 8-1 中 所 示 ， 我 们 将 每 次 考察 其 中 的 一 个 步骤 。 














图 8-1 Ajax 请 求 的 生命 周期 ， 从 客户 站 向 服务 带 端 发 送 请 求 ， 然 后 再 从 服务 右 端 返回 
下 面 完 来 创建 一 个 XHR 实例 ， 看 看 如 何 使 用 这 些 对 和 象 生 成 对 服务 如 的 请 求 。 


8.1.1 创建 XHR 实 例 

在 完美 的 世界 中 , 为 一 个 浏览 融 编 写 的 代码 可 以 在 所 有 稼 用 的 浏览 下 工作 。 我 们 已 经 知道 目 
己 并 非 生 活 在 完美 氨 界 中 ， 即 便 有 了 Ajax， 人 情况 也 是 一 样 。 通 过 JavaScript 的 XHR 对 和 象 来 发 起 
异步 请 求 有 一 个 标准 方法 , 而 且 下 浏览 硕 也 有 使 用 ActiveX 控件 的 专 有 方式 。 在 IE7 下 可 以 使 用 
一 个 模仿 标准 接口 的 包 逆 项， 但 是 IE6 却 需 要 不 同 的 代码 。 





注意 jQueryD AjaxD00000000000000000 IE0000000000000 
DUDDOUUUOUUUUUUUDINQueryU AcuwveXOUDOUUDUUOUUUUUUUUVUD 
UUUUUOUOUUD jQuery UUD AaxUUOUUDUDUDUDUDUDDDDDDDDDDG 


UUDUUUUUD 





J 这 两 本 书 的 中 文 版 分 别 为 《Ajax 实战 》 和 《Ajax 实战 : 实例 详解 》 已 由 人 民 邮 电 出 版 社 出 版 。 一 一 编者 注 
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一 旦 创建 了 XHR 对 象 , 用 来 建立 、 初始化 以 及 啊 应 请 求 的 代码 就 是 相对 于 浏览 带 而 独立 的 ， 
并 且 为 任何 特殊 的 浏览 融 创 建 XHR 实例 都 很 容易 。 问 题 是 不 同 的 浏览 融 实 现 XHR 的 方式 都 不 
一 样 ， 我 们 需要 按照 适合 当前 浏览 带 的 方式 来 创建 XHR 实例 。 

我 们 将 使 用 在 第 6 章 中 介绍 的 推荐 技术 特征 检测 , 而 不 是 检测 用 户 运行 的 浏览 器 来 决定 采用 
哪 种 方式 。 使 用 这 种 技术 ,我 们 尝试 计算 出 浏览 带 的 特征 而 不 是 分 析 使 用 的 什么 浏览 旨 。 特征 检 
测 会 使 代码 更 加 稳健 ， 因 为 它 可 以 在 文 持 所 测试 特征 的 任何 浏览 硕 中 工作 。 

代码 清单 8-1 展示 了 一 个 典型 的 使 用 该 技术 实例 化 XHR 的 习惯 用 法 。 


代码 清单 8-1 功能 检测 使 得 可 以 在 很 多 浏览 需 中 使 用 Ajax 的 代码 
var XhL; 间 测试 ActiveX 是 否 存 在 


if (window.ActiveXObject) { 














xhr = new ActiveXObject ("Microsoft.XMLHTTP").; i . 
} 间 测试 XHR 是 否 已 经 被 定义 
else 1f (window.XMLHttpRequest) { 

xhr = new XMLHttpRequest (); 本 
} | 如 果 不 支持 Ajax 则 抛 出 错误 
else { 

throw new Error("Ajax is not supported by this browser").,; 


} 
在 XHR 实例 被 创建 之 后 ， 它 拥有 一 组 方便 一 致 的 属性 和 方法 ， 可 以 跨 所 有 支持 的 浏览 器 实 
例 。 这 些 属性 和 方法 如 表 8-1 所 示 ， 其 中 最 常用 的 属性 和 方法 将 在 接 下 来 的 几 节 中 讨论 。 


表 8-1 XMLHttpRequest (XHR) 方法 和 属性 





























方法 描 述 
abort () 导致 当前 正在 执行 的 请 求 被 取消 
getAllResponseHeaders ( ) 返回 包含 所 有 响应 头 的 名 称 和 值 的 单个 字符 串 
getResponseHeader (name ) 返回 响应 头 中 指定 名 称 的 值 
open (method, url, async, username, 设置 HTTP 方 法 (GET 或 者 POST ) 和 请 求 的 日 标 URL。 可 以 声明 
0 为 同步 请 求 ， 也 可 以 为 需要 基于 容器 认证 的 请 求 提供 用 户 名 和 密码 
(可 选 ) 
send (content) 发 出 沉 有 指定 主体 内 容 ( 可 选 ) 的 请 求 
setResuestHeader (name, value) 使 用 指定 的 名 称 和 值 设 置 请 求 头 
属 性 质 述 
onreadystatechange 当 请 求 状态 改变 时 要 调用 的 事件 处 理 右 
readyState 一 个 指示 活动 请 求 的 当前 状态 的 整数 值 ， 如 下 所 示 : 
0 = UNSENT 
1 = OPENED 
2= HEADERS RECEIVED 
3 = LOADING 
4 = DONE 
responseText 在 响应 中 返回 的 主体 内 容 


图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 


218 第 8 章 使 用 Ajax 与 服务 器 通信 


( 续 ) 
responseXML 如 果 主 体内 容 被 识别 为 XML， 则 从 主体 内 容 创 建 XML DOM 
status 从 服务 硕 返 回 的 啊 应 状态 码 。 例 如 : 200 表 示 成 功 ，404 表 示 未 找 

到 。 查 阅 HTTP 规 范 来 可 以 获取 完整 的 状态 码 列表 
StatusText 响应 返回 的 状态 文本 信息 


a HTTP 1.1 状态 码 的 定义 来 和 目 文档 RFC 2616: 
http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10。 


注意 D000000000000000000XHROD000000000 http:/www.w3.org/ 
TR/XMLHttpRequest/[| 





现在 我 们 已 经 得 到 了 一 个 已 创建 的 XHR 实例 ， 下 面 就 来 看 下 建立 和 发 起 到 服务 器 的 请 求 需 
要 哪些 步 又 。 





8.1.2 疏 起 请 来 


在 回 服务 硕 发 出 请 求 之 前 ， 需 要 执行 如 下 的 设置 步 又 : 

(1) 指定 HTTP 方 法 ， 比 如 ( POST 或 者 GET ); 

(2) 提供 要 接触 的 服务 需 端 资源 的 URL; 

(3) 告诉 XHR 实例 如 何 通 报 进度 ; 

(4) 为 PosT 请 求 提供 任何 主体 内 容 。 

通过 调用 XHR 的 open () 方 法 来 设置 前 两 项 ， 如 下 所 示 : 

xhr.open( 'GET', '/some/resource/url'); 

注意 ,这 个 方法 不 会 将 请 求 发 送 到 服务 右 。 它 只 不 过 是 设置 了 要 使 用 的 URL 和 HTTP 方法 。 
也 可 以 向 open () 方 法 传递 第 三 个 布尔 型 参数 ,将 请 求 指定 为 异步 的 ( 如 果 参 数值 为 true, 这 也 
是 默认 值 ) 还 是 同步 的 ( 如 果 参 数值 为 false )。 发 起 同步 请 求 的 需要 不 是 很 多 (虽然 这 样 做 意 
味 着 无 需 处 理 回 调子 数 )。 毕 竟 ， 请 求 的 异步 本 质 通 滑 是 以 异步 方式 来 发 起 请 求 的 理由 。 

在 第 三 步 中 ， 必 须 提供 一 种 方式 让 XHR 实例 通知 我 们 正在 发 生 什 么 。 通 过 将 一 个 回调 函数 
赋值 给 XHR 对 象 的 onreadystatechange 属性 来 达到 这 个 目的 。XHR 实例 会 在 其 处 理 进程 的 
各 个 阶段 调用 这 个 被 称 为 就 绪 状 态 处 理 器 的 图 数 。 通 过 查看 XHR 其 他 属性 的 设置 ， 就 可 以 确切 
地 知道 请 求 中 正在 发 生 什 么 。 我 们 将 在 下 一 节 学 习 一 个 典型 的 就 绪 状 态 处 理 喜 是 如 何 运 行 的 。 

发 起 请 求 的 最 后 步骤 是 为 PosT 请 求 提供 主体 内 容 并 把 它 发 送 到 服务 器 。 这 些 步骤 都 是 通过 
send () 方 法 来 完成 的 。 对 于 通常 没有 主体 的 GET 请 求 ， 就 不 需要 传递 主体 内 容 参数 ， 如 下 所 示 : 

xhr.send (null).; 


当 癌 POST 请 求 传递 请 求 参数 时 ， 传 人 send() 方 法 的 字符 串 必须 拥有 正确 的 格式 (可 以 看 
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作 是 查询 字符 串 格式 ), 其 中 名 称 和 值 都 被 正确 地 进行 URI 编码 。 URI 编码 超出 了 本 节 的 范围 ( 事 
实 上 ，jQuery 将 为 我 们 处 理 好 这 一 切 )， 但 是 如 果 你 很 好 奇 ， 可 以 搜索 一 下 术语 encodeURI- 
component ， 你 会 得 到 想 要 的 东西 。 

这 种 调用 的 男 一 个 示例 如 下 : 

xhr.send('a=1&b=2&c=3'); 


下 面 来 看 看 到 研 什 么 是 就 绪 状 态 处 理 带 。 


8.1.3 ”保持 跟踪 进度 


XHR 实例 通过 就 绪 状 态 处 理 器 通知 我 们 它 的 进度 。 通 过 将 作为 承 绪 处 理 带 的 函数 引用 赋 但 
给 XHR 实例 的 onreadystatechange 属性 来 建立 处 理 器 。 

一 旦 通过 send() 方 法 发 出 请 求 , 随 关 请 求 在 其 不 同 状 态 之 间 转 变 这 个 回 幸 将 会 被 调用 多 次 。 
请 求 的 当前 状态 可 以 通过 readystate 属性 的 数字 代码 来 访问 (在 表 8-1 中 可 查看 关于 这 个 属性 
的 描述 )。 

那 太 好 了 , 但 更 多 情况 下 ,我们 只 对 请 求 在 什么 时 间 完 成 以 及 它 是 否 成 功 感 兴趣 。 就 绕 处 理 
器 经 党 使 用 代码 清单 8-2 中 所 示 的 习惯 用 法 来 实现 。 


代码 清单 8-2 ”就 绪 状 态 处 理 融 ， 忽 略 除 DONE 状态 之 外 的 所 有 状态 


忽略 除 DONE 状态 之 外 的 

















xhr.onreadystatechange = function() { 


if (this.readyState == 4) { 所 有 状态 
If this. status »s 200 &g 根据 响应 状态 进行 
this.status < 300) { 代码 分 支 
a "| 成 功 时 执行 
else { 
I | 失败 时 执行 


} 
} 


这 段 代 码 忽略 除 DONE 状态 之 外 的 所 有 状态 ,一 旦 检测 出 DONE 状态 ， 就 检查 status 属 
性 的 值 以 确定 请 求 是 否 成 功 HTTP 规范 定义 所 有 位 于 200 ~ 299 区 间 内 的 状态 人 码 为 成 功 , 等 于 或 
者 大 于 300 的 状态 码 为 各 种 类 型 的 失败 。 

下 面 来 探索 如 何 处 理 已 完成 请 求 的 响应 。 


8.1.4 获取 响应 


在 就 绪 人 处 理 带 确定 了 readystate 处 于 完成 状态 并 且 请 求 已 经 成 功 完成 之 后 ,就 可 以 从 XHR 
实例 中 获取 响应 的 主体 了 。 

尽管 Ajax 的 名 称 如 此 ( 其 中 义 代表 XML )， 但 是 啊 应 主体 的 格式 可 以 是 任何 文本 格式 ， 并 
不 局 限于 XML。 事 实 上 ， 大 多 数 时候 ，Ajax 请 求 的 啊 应 不 是 XML 的 格式 。 它 可 以 是 普通 的 文 
本 ,或 者 可 能 是 HTML 片段 ， 甚 至 可 以 是 使 用 JSON (JavaScript ObjectNotation ) 格式 (作为 一 
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种 交换 格式 正在 变 得 越 来 越 流行 ) 的 JavaScript 对 象 或 者 数组 的 一 段 文本 表示 。 

无 论 啊 应 主体 的 格式 如 何 , 都 可 以 通过 XHR 实例 的 responseText 属性 来 获取 啊 应 主体 ( 假 
设 请 求 成 功 完 成 ) .如果 啊 应 通过 包含 内 容 类 型 头 ( content-Type, 指 定 MIME 类 型 为 text /xml、 
application/xml， 或 者 MIME 类 型 以 +xml 结尾 ) 来 表明 它 的 主体 格式 是 XML ， 那 么 啊 应 主 
体 将 会 解析 为 XML。 结果 DOM 将 可 以 在 responsexML 属性 中 获取 。 然 后 可 以 使 用 JavaScript 
( jQuery 则 使 用 其 选择 器 API ) 来 处 理 XML DOM。 

在 客户 端 人 处 理 XML 不 是 一 件 复杂 的 事情 , 但 是 即使 在 jQuery 帮助 下 这 仍然 是 一 件 痛 否 的 事 
情 。 尽 管 有 时 只 能 使 用 XML 返回 复杂 的 层次 数据 ， 但 是 当 不 需要 使 用 XML 的 全 部 功能 (会 市 
来 相应 的 厅 烦 ) 时 ， 页 面 开发 者 经 常会 使 用 其 他 格式 。 

但 是 使 用 这 些 其 他 的 格式 也 有 了 麻烦。 如 果 返 回 JSON， 它 必须 被 转换 为 与 其 运行 时 等 价 的 形 
式 。 如 果 返 回 HIML， 它 必须 被 加 载 到 合适 的 目标 元 素 中 。 如 果 返 回 的 HTML 标记 中 包含 需要 
求 值 的 <script> 块 该 怎么 办 ? 本 节 中 不 会 涉及 这 些 问题 ， 因 为 本 布 不 是 一 个 完整 的 Ajax 参考 ， 
而 且 更 重要 的 是 ， 因 为 jQuery 已 经 帮助 我 们 处 理 了 其 中 大 部 分 的 问题 。 

此 时 ， 你 可 以 回顾 一 下 在 图 8-1 中 展示 的 整个 流程 。 

在 这 个 简短 的 Ajax 概述 中 ,我 们 找 出 了 页 面 开发 者 在 使 用 Ajax 时 需要 处 理 的 一 些 难点 ， 如 
下 所 示 : 

口 实例 化 XHR 对 象 需要 特定 于 浏览 善 的 代码 ; 

口 就 绪 处 理 需 需要 处 理 很 多 乏味 的 的 状态 改变 ; 

口 需要 使 用 多 种 方式 来 处 理 啊 应 主体 ， 处 理 的 方式 取决 于 其 格式 。 

本 章 其 余 的 部 分 将 描述 jQuery 的 Ajax 方法 和 实用 上 另 数 如 何 使 得 在 页 面 上 使 用 Ajax 更 加 容易 
(以 及 更 加 清晰 )。jQuery 的 Ajax API 有 多 种 选择 ， 下 面 从 一 些 最 简单 、 最 第 用 的 工具 开始 。 


8.2 ”加载 内 容 到 元 素 中 


Ajax 的 一 个 最 第 见 的 用 途 可 能 是 从 服务 带 抓 取 一 堆 内 容 并 将 其 填充 到 DOM 中 的 菏 个 关键 位 
置 。 这 些 内 容 可 以 是 一 个 将 要 成 为 目标 容 带 元 素 子 内 容 的 HTML 片段 ， 也 可 以 是 将 要 成 为 目标 
元 系 内 容 的 普通 文本 。 

































































为 建立 示例 做 好 准备 

与 目前 为 止 我 们 在 本 书 中 已 经 考察 过 的 所 有 示例 代码 都 不 同 , 本 章 的 代码 示例 需要 Web 服 
务 器 提供 的 服务 以 便 接 受 对 服务 器 端 资源 的 Ajax 请 求 。 因为 对 服务 器 端 操作 机 制 的 探讨 超出 了 
本 书 的 范围 ， 所 以 我 们 只 建立 一 些 很 小 的 服务 器 端 资源 来 把 数据 送 回 客 尸 端 ， 而 无 需 操 心 真正 
的 操作 ， 只 需 将 服务 器 看 作 一 个 “ 黑 盒 子 ” ， 我 们 不 需要 也 不 想 知 道 它 是 如 何 完成 工作 的 。 

为 了 局 用 这 些 “ 黑 盒 ” 资 源 的 服务 ， 需 要 建立 菜 种 类 型 的 Web 服务 器 。 为 了 方便 起 见 ， 
服务 器 端 资源 已 经 通过 两 种 方式 建立 : JSP (Java Server Page ) 和 PHP。 如 果 你 正在 运行 (或 
者 希望 运行 ) 一 个 servlet/JSP 引擎 ， 可 以 使 用 JSP 资源 ; 如 果 你 想 为 Web 服务 器 启用 PHP， 
可 以 使 用 PHP 资源 。 
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如 果 你 想 使 用 JSP 资源 但 是 没有 正在 运行 的 合适 的 服务 器 , 可 以 参见 包含 在 本 章 的 示例 代 
码 中 关于 建立 免费 的 Tomcat Web 服务 器 的 说 明 。 你 会 在 chapter8/tomcat.pdf 文 件 中 找到 这 些 说 
明 。 不 用 担心 ， 即 使 从 未 看 过 一 行 Java 代码， 建立 Tomcat 服 务 器 比 你 预想 的 要 简单 得 多 | 

下 载 的 代码 中 的 示例 可 以 使 用 JSP 或 者 PHP 资源 来 建立 ， 这 取决 于 所 建立 服务 器 。 

一 旦 建立 了 所 选择 的 服务 器 ， 就 可 以 测试 URL: http://localhost:8080/jqia2/chapter8/test.jsp 
( 用 来 检测 Tomcat 的 安装 是 否 正 确 ) 或 者 http://localhost/jqia2/chapter8/test.jsp ( 用 来 检测 PHP 
的 安装 是 否 正 确 )。 后 者 假设 你 已 经 建立 了 Web 服务 器 (Apache 或 者 所 选 的 任何 其 他 服务 器 ) 
来 使 用 示例 代码 根 文 件 夹 作为 文档 基础 。 

当 你 成 功 地 看 到 了 相应 的 测试 页 面 时 ， 就 可 以 准备 运行 本 草 中 的 示例 了 。 

如 果 你 不 想 在 本 地 运行 这 些 示 例 ， 也 可 以 从 这 里 远程 运行 示例 代码 : http://bibeault.org/jqia2。 


假设 在 页 面 加 载 时 ， 我 们 想 使 用 名 为 someResource 的 资源 从 服务 器 获取 一 大 段 HTML， 
并 把 它 作 为 ia 为 somecontainer 的 <aiv> 元 素 的 内 容 。 这 是 在 本 章 中 最 后 一 次 说 明 如 何在 没有 
jQuery 帮助 的 情况 下 完成 这 个 任务 。 使 用 我 们 在 本 章 早 些 时 候 建立 的 模式 ，onloaa 处 理 器 的 主 
体 代码 如 代码 清单 8-3 所 示 。 这 个 示例 的 完整 HTML 文件 可 以 在 文件 chaptergjlisting 8.3.html 中 
找到 。 











Ce 


注意 000000 WeeDOO0000000000000000000000[DDU0D URL 
[| DD http://ocalhost:8080/jqgia2/chapter8/listing.8.3.html[l| [UUU Apache[| [DDDDDD 


U :8080D DDDUD TomcatDDUUUUUD 
UU0O0U000 URLDOUOUOUD :8080I0 D000000000000000 
UU URLDOUUDUUUUD 


代码 清单 8-3 ”使 用 原生 XHR 来 获取 并 包含 HTML 片段 
var xhr; 


if (window.ActiveXObject) { 
Xxhr = new ActiveXObject ("Microsoft.XMLHTTP"); 
} 
else if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest().,; 
} 


else { 
throw new Error("Ajax is not supported by this browser").; 


) 


xhr.onreadystatechange = function() ({ 
if (this.readyState == 4) f{ 
if (this.status >= 200 && this.status < 300) { 
document .getElementById('someContainer') 
.innerHTML = this.responseText:; 
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xhr.open('GET', 'someResource' ) ; 
xhr.send().; 


尺 省 这 里 没有 使 用 什么 技巧 ， 但 却 包含 了 大 量 的 代码 ， 是 是 有 20 行 ， 还 不 包括 为 了 方便 阅 
读 而 添加 的 空 日 行 。 

使 用 jQuery 编写 的 作为 就 绪 处 理 右 主体 的 等 价 代 码 如 下 所 示 : 

$('#someContainer') .load('someResource'); 


我 非常 清楚 你 喜欢 编写 和 维护 哪个 代码 ! 下 面 来 仔细 考察 下 这 个 语句 中 使 用 的 jQuery 方法 。 




















8.2.1 使 用 jQuery 加 载 内 容 


上 一 节 结 尾 处 的 简单 jQuery 语句 轻松 地 从 服务 器 端 资源 加 载 内 容 ， 它 使 用 了 一 个 最 基础 ， 
但 是 很 有 用 的 Ajax 方法 : loadq() 。 这 个 方法 完整 的 语法 描述 如 下 所 示 。 








方法 语法 : load 
load(url, parameters, callback) 
向 指定 的 URL 发 起 带 有 可 选 请 求 参数 的 Ajax 请 求 。 可 以 指定 一 个 回调 函数 ， 并 在 请 求 完成 
并 且 DOM 被 修改 之 后 调用 此 函数 。 响 应 文本 会 替换 所 有 匹配 元 素 的 内 容 


参数 

url (字符 囊 ) 要 将 请 求 发 送 到 的 服务 器 端 资 源 的 URL, 可 以 通过 选择 器 ( 可 
选 ) 来 修改 URL ( 下面 会 介绍 ) 

parameters (字符 串 | 对 象 | 数组 ) 指定 要 作为 请 求 参 数 传递 的 任何 数据 。 这 个 参数 可 
以 是 字符 串 ( 被 用 作 查 询 字符 串 ), 也 可 以 是 对 象 (其 属性 被 序列 化 为 正 
确 编码 的 参数 ,这 些 参 数 会 被 传 入 请 求 )， 或 者 由 对 象 组 成 的 数组 ( 对 象 
的 name 和 value 属性 指定 了 名 称 / 值 对 ) 
如 果 指 定 为 对 象 或 者 数组 ， 则 使 用 POST 方法 来 发 起 请 求 。 如 果 省 略 或 
者 指定 为 字符 串 ， 则 使 用 GET 请 求 

callback (函数 ) 一 个 可 选 的 回调 函数 ， 在 响应 数据 被 载 入 匹配 集 元 素 后 调用 。 
传 入 此 函数 的 参数 是 响应 文本 、 状 态 字符 串 (通常 是 success ) 以 及 
XHR 实例 
为 包装 集 的 每 个 元 素 调用 一 次 此 函数 ， 并 把 函数 上 下 文 (this ) 设置 为 
目标 元 素 

返回 值 

包装 集 


尽管 使 用 起 来 很 简单 , 但 是 这 个 方法 还 有 一 些 重要 细 记 需要 注意 。 例 如 , 当 使 用 parameters 
来 提供 请 求 参数 时 ， 如 果 使 用 的 是 散 列 对 象 或 者 数组 ， 则 通过 PosT HTTP 方法 来 发 起 请 求 ， 否 
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则 发 起 GET 请求。 如 果 想 要 创建 一 个 带 参 数 的 GET 请求 ,可 以 将 它们 作为 查询 字符 串 包含 在 URL 
中 。 但 是 这 样 做 的 时 候 要 注意 , 我 们 有 责任 确保 查询 字符 串 已 被 正确 格式 化 并 且 请 求 参数 中 的 名 
称 和 值 已 进行 URI 编码 。 使 用 JavaScript 的 encodeURIComponent () 方 法 很 容易 做 到 这 一 点 , 或 
者 也 可 以 采用 在 第 6 章 前 述 过 的 jQuery 的 $.param() 实 用 也 数 提供 的 服务 。 

大 部 分 时 候 ， 我 们 使 用 1oad () 方 法 把 整个 响应 注入 包装 集 的 元 素 中 ， 但 是 有 时 我 们 可 能 
想 要 短 选 作为 啊 应 返回 的 元 素 。 如 末 要 衔 选 啊 应 元 素 ，jQuery 允许 在 URL 上 指定 选择 各 ， 用 
来 限定 哪些 啊 应 元 素 会 被 注入 到 包 姜 元 素 中 。 通 过 在 URL 中 添加 紧 随 空格 的 选择 硕 后 绥 来 指 
定 选择 硕 。 

例如 ， 要 史 选 啊 应 元 率 以 便 只 注入 <dqiv> 实 例 ， 可 以 这 样 写 : 

$s('.injectMe') .load('/someResource div'); 

当 说 到 提供 在 请 求 中 提交 的 数据 时 , 有 时 候 我 们 会 临时 拼 竣 特殊 的 数据 , 但 是 我 们 经 常会 发 
现 自己 希望 获取 用 户 输 入 到 表单 控件 中 的 数据 。 

正如 你 可 能 期 望 的 那样 ，jQuery 为 此 提供 了 一 些 帮 助 。 

序列 化 表单 数据 

如 果 作 为 请 求 参数 来 发 送 的 数据 来 日 于 表单 控件 ， 则 用 来 帮助 创建 查询 字符 串 的 jQuery 方 
法 是 serialize()， 其 语法 如 下 所 示 。 


























方法 语法 : serialize 
serialize() 
根据 包装 集中 所 有 成 功 的 表单 元 素 或 者 包装 集 的 表单 中 所 有 成 功 的 表单 元 素 ,创建 正确 格式 化 
和 编码 的 查询 字符 囊 
参数 
无 
返回 值 
格式 化 的 查询 字符 串 











serialize() 方 法 非常 智能 , 它 只 从 包 竣 集中 的 表单 控件 元 素 上 以 及 被 认为 是 成 功 的 有 资格 
的 元 素 上 收集 信息 。 根 据 HTML 规范 "的 规则 ,成 功 的 控件 是 指 作为 表单 提交 的 一 部 分 而 被 包含 
的 控件 。 未 选中 的 复 选 框 和 单 选 按钮 、 未 选中 的 下 拉 列 表 以 及 禁用 的 控件 部 被 认 为 是 不 成 功 的 控 
件 ， 因 此 不 会 参与 表单 提交 ， 这 些 控 件 也 会 被 serialize() 忽 略 。 

如 采 想 要 以 JavaScript 数 组 的 形式 〈 而 不 是 查询 字符 串 ) 来 获取 表单 数据 ， 可 以 使 用 jQuery 
提供 的 serializeArray () 方 法 。 











GD HTML 4.01 规范 17.13.2 节 , “Successful controls”: http:/www.w3.org/TR/html401/interact/forms.html#bh-17.13.2。 
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方法 语法 : serializeArray 


serializeArray() 


把 所 有 成 功 的 表单 控件 的 值 收集 到 包含 控件 名 称 和 值 的 对 象 数组 中 


返回 值 
由 表单 数据 组 成 的 数组 


setrjializeaArray() 返 回 的 数组 由 匿名 的 对 象 实例 组 成 ， 每 个 实例 包含 一 个 name 属性 和 一 
个 value 属性 ， 它 们 分 别 包 含 了 每 个 成 功 表单 控件 的 名 称 和 值 。 这 是 (不 是 偶然 地 ) 适合 用 来 
传递 给 1oad () 方 法 来 指定 请 求 参数 数据 的 格式 之 一 。 

， 了 lo0ad() 方 法 可 供 利 用 ,下 面 就 来 解决 一 些 很 多 Web 开发 人 员 遇 到 的 现实 世界 中 的 稼 见 
问题 。 


8.2.2 加载 动态 的 HTML 捕 段 


在 商业 应 用 中 ( 特别 是 对 于 贸易 网 站 )， 我 们 经 凋 想 要 从 服务 融 获 取 实 时 数据 以 便 癌 用 户 展 
示 最 新 的 信息 。 毕 苋 , 我 们 不 想 使 消费 者 误 以 为 他 们 可 以 购买 一 些 不 可 能 买 到 的 东西 ， 对 吧 ? 在 
本 中 , 我 们 将 痢 手 开 发 个 贯穿 本 曹 教 程 的 页 面 。 这 个 页 面 是 一 个 名 为 The Boot Closet 的 虚构 
公司 〈 摩 托 就 进 销 存 在 线 夫 售 商 ) 网 站 的 一 部 分 。 与 其 他 具有 固定 产品 目录 的 在 线 雪 售 商 不 同 ， 
这 个 网 站 的 进 销 存 清单 是 变化 的 , 取决 于 经 营 者 当天 完成 了 什么 交易 和 已 经 从 库存 里 卖 挥 了 哪些 
东西 。 对 于 我 们 来 说 确保 始终 显示 最 新 的 信息 是 至 关 重 要 的 。 

开始 创建 页 面 ( 忽 略 站 点 导航 和 其 他 样板 以 便 专 注 于 眼前 的 课程 )， 我 们 希望 为 客户 呈现 一 
个 包含 当前 可 用 球 式 的 下 拉 列 表 ， 当 一 种 蒜 式 被 选择 后 就 显示 这 个 球 式 相关 的 详细 信息 。 初始 显 
示 时 ， 页 面 看 起 来 将 会 如 图 8-2 所 示 。 


@NOO0 The Boot Closet — Phase 1 


Ox 下 http: 11iocalhost 8080/Jqla2 /chaprers/bootcloset/phase.. html 























EU 


Choose your boots 


Boot style: 

















图 8-2 ”贸易 页 面 的 初始 显示 ， 用 一 个 简单 的 下 拉 列 表 来 吸引 用 户 的 单 击 
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在 页 面 第 一 次 加 载 后 , 会 显示 出 带 有 当前 库存 中 可 用 款式 清单 的 下 拉 列 表 。 当 没有 选中 任何 
慰 式 时 ， 就 显示 一 个 帮助 信息 一 choose a style 一 作为 选择 项 的 占 位 符 。 这 可 以 吸引 用 户 与 下 拉 列 
表 进 行 交 互 ， 当 用 户 从 下 拉 列 表 选 中 一 种 鞭子 球 式 时 ， 我 们 需要 做 以 下 事情 : 

口 在 下 拉 列 表 下 面 的 区 域 显示 有 关 这 个 款式 的 详细 信息 ; 

口 删除 一 choose a style 一 项 。 如 果 用 户 选 中 了 一 个 款式 ， 这 个 选择 项 就 完成 了 目 己 的 使 命 而 








不 再 有 意义 了 。 
下 面 从 分 析 用 来 定义 这 个 页 面 结 构 主 体 的 HTML 标记 开始 : 
<body> 


<div id="banner"> 


<img src="images/banner.boot.closet.png" 


alt="The Boot Closet"/> 
</div> 


<div id="pageContent"> 
<hli>Choose your boots</h1l> 包含 下 拉 列 表 控 件 
<div> 


<div id="selectionsPane"> 
<label for="bootChooserControl">Boot style:</1label>&nbsp; 


<select id="bootChooserControl" name="bootStyle"></select> 


</div> 
<div id="productDetailPane"></div> 
> 6 为 产品 的 详细 信息 预 留 空间 
</div> 
</body> 


这 上 段 标 记 的 内 容 不 多 ， 是 吧 ? 
壮 循 不 唐 突 JavaScript 的 规则 ， 我 们 已 经 在 外 部 样式 表 中 定义 了 所 有 的 视觉 演 染 信息 ， 并 且 
没有 在 HTML 标记 中 包含 任何 行为 方面 的 代码 。 


这 段 标记 最 有 趣 的 部 分 是 一 个 用 来 容纳 允许 客户 选择 靴子 款式 的 <select> 元 素 的 容 需 @， 
以 及 另 一 个 用 来 注入 产品 详细 信息 的 容器 人 @， 


注意 , 在 用 户 与 页 面 交 互 之 前 , 第 要 问 靳 子 蒜 式 控件 洪 加 其 选项 元 系 。 下 面 丈 来 看 手 为 该 页 
面 汰 加 必要 的 行为 。 


首先 添加 的 是 一 个 用 来 获取 和 填充 靴子 蒜 式 下 拉 列 表 的 Ajax 请 求 。 























注意 D000000000000000000000 HIMLOOOOOOOOOOOODOODO 


UUUUDUDUDDUDDU AiaxDUDUDUDUDUDDDDDDDDDDDDDDDDDDD 
U0 





为 了 向 鞭子 款式 控件 添加 选项 ， 我 们 定义 了 一 个 就 绪 处 理 器 并 在 其 中 使 用 便捷 的 1oad () 
方法 : 
$('#bootChooserControl') .load('/jqia2/action/fetchBootStyleOptions'); 
是 不 是 很 简单 ? 这 个 语句 唯一 复杂 的 地 方 是 URL (并 非 真 的 很 长 或 者 很 复杂 )， 它 指定 了 到 
服务 器 端 名 为 fetchBootStyleOptions 活动 的 请 求 
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使 用 Ajax 的 一 个 好 处 ( 在 jQuery 的 帮助 下 这 个 好 处 更 加 明显 ) 是 , 它 完 全 不 依赖 于 服务 
器 端的 技术 。 很 明显 服务 器 端 所 选择 的 技术 对 URL 的 结构 有 影响 ， 但 是 除 此 之 外 无 需 太 担心 
服务 器 发 生 的 事情 。 我 们 只 需 简 单 地 发 起 HTTP 请 求 ， 有 时 带 有 合适 的 参数 数据 ， 并 且 只 要 
服务 硕 返 回 预 期 的 啊 应 ， 我 们 束 不 必 关 心服 务 关 是 由 Java、Ruby、PHP， 还 是 老式 的 CGI 来 
驱动 的 。 

在 这 种 特定 情况 下， 我 们 期 望 服务 右 问 资源 返回 表示 鞭子 球 式 选项 的 HTML 标记 一 一 可 能 

















是 来 目 于 库存 数据 库 。 我 们 伪造 的 后 端 代码 返回 的 啊 应 如 下 所 示 : 


<option value="">&mdash; choose a style &mdash;</option> 

<option value="7177382">Caterpillar Tradesman Work Boot</option> 

<option value="7269643">Caterpillar Logger Boot</option> 

<option value="7332058">Chippewa 9" Briar Waterproof Bison Boot</option> 
<option value="7141832">Chippewa 17" Engineer Boot</option> 

<option value="7141833">Chippewa 17" Snakeproof Boot</option> 

<option value="7173656">Chippewa 11" Engineer Boot</option> 

<option value="7141922">Chippewa Harness Boot</option> 

<option value="7141730">Danner Foreman Pro Work Boot</option> 

<option value="7257914">Danner Grouse GTX Boot</option> 





这 个 啊 应 随后 被 髋 入 到 <select> 元 系 中 ， 生 成 一 个 具有 完全 功能 的 控件 。 
接 下 来 的 操作 是 为 下 拉 列 表 添加 行为 这 样 它 可 以 对 改变 做 出 反应 ， 从 而 实现 前 面 列 出 的 职 
为 此 编写 的 代码 稍微 有 点 复杂 : 


$('#bootChooserControl') .change (function (event)t 





$('#productDetailPane').loadl 获取 和 显示 产品 
'/jqia2/action/fetchproductDetails', 详细 信息 


{style: 
functionl() 
局 
1 


在 这 段 代 码 中 ,我 们 选取 靴子 款式 的 下 拉 列 表 并 为 其 绑 定 一 个 change 处 理 带 @。 在 改变 处 
理 需 的 回调 中 (每 当 客 户 改 变 选择 项 都 会 调用 此 回调 )， 我 们 通过 回 事 件 目标 〈 也 就 是 触发 事件 
的 <select> 元 素 ) 应 用 val () 方 法 来 获取 选择 项 的 当前 值 。 然 后 对 productDetailPane 元 素 
再 次 使 用 1oad () 方 法 全 来 向 服务 句 端 资源 ( 即 fetchpProductDetails ) 发 起 Ajax 回调 ， 并 传 
人 参数 名 为 style 的 球 式 值 。 

在 客户 选择 了 一 个 可 用 的 鞭子 球 式 后 ， 页 面 将 会 如 图 8-3 所 示 。 

在 就 绪 处 理 硕 中 执行 的 最 值得 关注 的 操作 是 10ad () 方 法 的 使 用 ， 用 来 快速 轻松 地 从 服务 需 
获取 HTML 片段 并 把 它们 作为 现 有 元 素 的 子 元 素 而 插入 到 DOM 中 。 这 个 方法 非常 方便 并 且 适 合 
由 服务 器 ( 具有 服务 器 端 模 板 功 能 例如 JSP 和 PHP 技术 ) 支持 的 Web 应 用 程序 。 

代码 清单 8-4 显示 了 The Boot Closet 页 面 的 完整 代码 , 可 以 从 http:/localhost[:8080]/jqia2/chapter8/ 
bootcloset/phase.1.html 找到 。 在 本 童 的 学 习 过 程 中 ， 我 们 会 再 次 访问 这 个 页 面 为 其 添加 更 多 的 
功能 。 


{ SsS('[value=""]',event.target) .remove(); 


a 省 
S (event.target) .val()}, 
} 
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@0n O The goor Closet 一 Phase 1 三 | 
分 大 上 http: /jlocalhost 080jjqis21chagerRbsotdoset/plase 1 html 


el pr 


pC AL 


_ THE Bo CLOSE a 


Choose your boots 
[Hl Chippewa 9" Briar Waterproof Bison Boot 1% 


Item name: Chippewa 9-inch Briar Waterproof Bison Boot 
SKU: 7332058 
Height: 9 inches 
Colors: tan/brown/amber 
Lining: Chip-A-Tex® waterproof 
Today's price: $138.00 


Features: Amber shark skin tp leather. Chip-A-Tex® waterproof bootie, Vibram long haul outsole, Steel shank. 
Black nickle non-tarnishable hardware. Heavy duty stay-tied laces. Removable cushion orthotic. Non-insulated. 


AL 





图 8-3 ”服务 器 端 资源 返回 预 格式 化 的 HITML 片段 来 显示 鞭子 的 详细 信息 


代码 清单 8-4 ”The Boot Closet 贸易 页 面 的 第 一 阶段 代码 


<!IDOCTYPE html> 





<html> 
<head> 
<title>The Boot Closet &mdash; Phase 1</title> 
<link rel="stylesheet" type="text/css" href="../../styles/core.css"> 


< InK rel="stylesheet" type="text/css" href="bootcloset.css"> 
<link rel="icon" type="image/gif" href="images/favicon.gif"> 
<script type="text/javascript" 


src="../../scripts/jJquery-1.4.js"></script> 
<script type="text/javascript" 
src="../../scripts/jJqia2.support.js"></script> 


<script type="text/javascript"> 
Ss(function() { 


$('#bootChooserControl') 
.load('/jJgqia2/action/fetchBootStyleOptions').,; 
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$('#bootChooserControl') .change (function(event)t 
Ss('#productDetailPane').loadl( 
'/jaqia2/action/fetchProductDetails', 
{style: S$S(event.target) .val()}, 


function() 


} 3 
下 


</script> 
</head> 


<body> 


<div id="banner"> 


('[value=""]',event.target) .remove(); } 


<img src="images/banner.boot.closet.png" alt="The Boot Closet"/> 


</div> 


<div id="pageContent"> 


<h1li>Choose your boots</hi1i> 


<div> 


<div id="selectionspPane"> 


<label for=" 


bootChooserControl">Boot style:</1label>&nbsp; 


<select id="bootChooserControl" name="bootStyle"></select> 


</div> 


<diyv id="productDetailPane"></div> 


</div> 
</div> 
</body> 


</htmil> 





如 琳 需 要 获取 HTML 片段 来 填充 一 个 元 系 〈 或 者 一 组 元 系 ) 的 内 容 ，1load () 方 法 就 非常 有 
用 。 但 是 有 时 候 我 们 希望 对 如 何 创 建 Ajax 请 求 进行 更 多 的 控制 ， 或 者 需要 对 响应 主体 中 的 返回 





据 进行 更 加 复杂 的 操作 。 


下 面 继续 考察 jQuery 为 这 些 复 








复杂 的 情况 提供 了 哪些 功能 。 





8.3 发 起 GET 和 Posm 请 求 


lo0ad() 方 法 可 以 发 起 GET 或 者 PosT 请 求 , 这 取决 于 如 何 提 供 请 求 参数 数据 ( 如 采 有 的 话 )， 
但 是 有 时 候 我 们 想 对 要 使 用 哪个 HTTP 方法 进行 更 多 的 控制 。 为 什么 我 们 要 关心 使 用 哪个 HTTP 


方 


法 。 


法 呢 ? 因为 服务 器 关心 。 








传统 上 ，Web 作者 使 用 GET 和 PosT 方法 非常 随意 ,不 关心 HTTP 协议 规定 如 何 使 用 这 些 方 





这 两 个 方法 的 使 用 规则 如 下 所 示 。 


D GET 请 求 一 一 意图 是 敌 等 的 : 相同 的 GET 操作 无 论 进行 一 次 、 两 次 还 是 三 次 操作 ， 返 回 
的 结 末 应 该 是 完全 相同 的 《假设 没有 其 他 的 力量 在 起 作用 来 改变 服务 带 状 态 )。 

D PosT 请 求 一 一 可 以 是 非 知 等 的 ne ed ei 的 模型 状态 。 
例如 ， 添 加 或 者 更 新 数据 库 中 的 记录 或 者 从 服务 名 删除 信息 。 
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此 ，GET 请 求 应 该 只 用 于 获取 数据 时 使 用 ,正如 它 的 名 称 所 暗示 的 那样 。 可 能 需要 为 GET 
请 求 回 服 务 表 发 送 一 些 参 数 数据 。 例 如 ,为 了 获取 颜色 信息 而 发 送 天 式 号 码 。 但 是 如 果 回 服务 骨 
发 送 数 据 的 目的 是 为 了 进行 改变 ， 就 应 该 使 用 PosT 请 求 。 











警告 DD00000000000000000 HITPDOODOOODOOODOODOcSarOOODD 
UDDDODUDUOUDU HTrPOUUDOUDOUU00U00UU00UuN0UUUU00 
UDODU RESIDUDDDDDDDDDDDU RESTUUUUUUUUUUUUU BITIEDD 
UD PUT pereTE UOUOUUUOUUUUUUUUU sertd rosrUU 0 


考虑 到 这 一 点 ， 如 果 回 顾 一 下 The Boot Closet 第 一 阶段 的 实现 (代码 清单 8-4 )， 就 会 发 现 我 
们 做 错 了 ! 因为 如 果 我 们 癌 参 数 数据 提供 一 个 散 列 对 象 ，jQuery 就 会 发 出 PosT 请 求 ， 真 正 应 该 
发 出 GET 请 求 时 却 发 出 了 PosT 请 求 。 在 Firefox 下 显示 页 面 时 看 一 下 Firebug 的 记录 (如 图 8-4 
所 示 ) 就 可 以 看 到 第 二 个 请 求 ( 当 我 们 从 球 式 下 拉 列 表 中 选择 一 项 时 被 提交 的 请 求 ) 的 确 是 POST。 









记 Inspect Clear Profile QQ 


Console HIML CSS Script DOM Net 
» GET http:/ /localhost:8080/jqia2 /action/fetchBootStyleOptions 
vw POST http:/ /localhost:8080/jqia2 /action/fetchProductDetails 


Options 
jquery-1..2.min.js (line 19) 4 
jquery-1..2.min.js (line 19) 
Headers Post Response 


Response Headers 


Server Apache-Coyote/1i.1 
Content-Type text/html 
Content-Length 774 
Date Wed, 88 Jul 2009 23:57:45 GMT 














图 8-4 ”查看 Firefox 控制 台 就 会 发 现 应 该 发 出 GET 请 求 时 发 出 的 却 是 PosT 请 求 





是 否 真 的 很 重要 ? 这 取决 于 你 自己 , 但 是 如 果 想 按照 HTTP 期 望 的 方式 来 使 用 它 , 那么 获取 
鞭子 详细 信息 的 请 求 应 该 是 GET 而 不 是 POST。 

我 们 可 以 简单 地 创建 指定 请 求 信息 的 参数 为 字符 串 而 不 是 散 列 对 象 ( 稍 后 会 再 次 探讨 这 个 情 
况 )， 但 是 此 刻 先 来 利用 jQuery 提供 的 另 一 种 方式 来 发 起 Ajax 请 求 。 








获取 Firebug 

开发 一 个 DOM 脚本 应 用 程序 而 不 借助 调试 工具 ,这 就 像 囊 着 电焊 手套 在 音乐 会 中 弹 钢琴 。 
这 不 是 目 找 兰 吃 吗 ? 

你 的 开发 工具 箱 中 要 有 一 个 重要 的 工具 Firebug， 它 是 Firefox 浏览 器 的 一 个 插件 。 如 
图 8-4 所 示 , 在 页 面 开发 的 过 程 中 Firebug 不 仅 允 许 我 们 查看 JavaScript 控制 人 台 , 还 可 以 查看 动 
态 的 DOM、CSS、 肢 本 以 及 页 面 上 其 他 方面 的 内 容 。 


一 
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和 当前 的 目标 最 为 相关 的 一 个 特征 是 ，Firebug 拥有 将 Ajax 请 求 连同 其 请 求 和 响应 信息 一 
起 记录 下 来 的 能 

对 于 非 Firefox 的 浏览 器 ， 可 以 使 用 Firebug Lite 版 本 ， 它 会 在 调试 的 时 候 作为 一 个 
JavaScript 库 来 加 载 。 

你 可 以 从 http://getfirebug.com 下 载 Firebug ,在 http:/getfirebug.conylite.html 下 载 Firebug Lite。 

Google 的 Chrome 浏览 器 内 置 了 类 似 于 Firebug 的 调试 能 力 , 可 以 通过 打开 它 的 Developer 
Tools 来 显示 调试 器 〈 看 下 菜单 来 查找 此 项 它 经 种 会 改变 位 置 )。 





8.3.1 使 用 GET 获 取 数 据 


jQuery 提供 了 发 起 GET 请 求 的 几 种 方式 , 与 10ad() 不 同 , 这 些 方式 不 是 作为 应 用 到 包装 
集 上 的 jQuery 方法 来 实现 的 , 而 是 提供 了 几 个 实用 果 数 来 发 起 各 种 不 同类 型 的 SET 请 求 。 第 1 
章 里 曾 提 到 过 ，jQuery 实用 子 数 是 位 于 jQuery 全 局 名 称 ( 及 其 别名 $ ) 命名 空间 下 面 的 项 级 
咀 数 。 

如 果 我 们 想 要 从 服务 右 获 取 一 些 数据 ， 然 后 决定 如 何 处 理 这 些 数据 ( 而 不 是 让 1o0ad() 方 法 
把 这 些 数 据 设置 为 HTML 元 系 的 内 容 )， 就 可 以 使 用 $ .get () 实 用 函数 。 它 的 语法 如 下 所 示 。 

















函数 语法 : $ .get 


s .get (url, parameters, callback, type) 
使 用 指定 的 URL， 用 任何 已 传 入 的 参数 作为 查询 字符 串 向 服务 器 发 起 GET 请 求 


参数 
ED (字符 串 ) 通过 GET 方法 接触 的 服务 器 端 资源 的 URL 


Darametere (字符 串 | 对 多 | 数组 ) 指定 将 要 作为 请 es 数据 。 这 个 参数 
可 以 是 字符 串 〈《 被 用 作 查 询 字符 串 ) 对象 【其 属性 被 序列 化 为 正确 编码 
的 参数 ， 这 些 参数 会 被 传 入 请 求 ) 或 者 由 对 象 组 成 的 数组 〈 对 象 的 name 
和 value 属性 指定 了 名 称 / 值 对 ) 

callback (函数 ) 一 个 可 选 的 回调 函数 ， 在 请 求 成 功 完成 时 调用 。 传 入 回调 的 第 
个 参数 是 响应 主体 (根据 设置 的 type 参数 来 解析 响应 主体 )， 第 二 A 
数 是 文本 信息 。 第 三 个 参数 包含 对 XHR 实例 的 引用 

type (字符 串 ) 指定 Pd (可 选 ) 可 以 是 下 列 类 型 中 的 一 种 : 
html、text、xml、json、script 或 者 jsonp。 查看 本 章 随 后 对 S$ .ajax() 
的 描述 以 了 解 更 多 的 细 闻 

返回 值 

XHR 实例 
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s.get() 实 用 图 数 允许 使 用 多 种 方式 来 发 起 GET 请求 。 可 以 使 用 多 种 方便 的 格式 来 指定 请 求 
参数 ( 如 果 有 的 话 )， 提 供 啊 应 成 功 时 所 调用 的 回调 ， 甚 至 控制 啊 应 0 以 及 传 入 
回调 。 如 果 这 ce 的 话 ， 我 们 稍 后 将 看 到 一 个 更 加 通用 的 函数 一 一 $ .ajax( 

当 考 察 $ .ajax ( 中 数 时 , 我 们 会 更 加 详细 地 审查 type 参数 , 不 过 日 re 的 内 
容 类 型 让 它 默 认为 html 号 0 xm]", 

在 The Boot Closet 页 面 使 用 $ .get () 因数 蔡 换 10ad() 方 法 ， 如 代码 清单 8-5 所 示 。 


代码 清单 8-5 ”改变 The Boot Closet 来 使 用 GET 获取 款式 信息 


$('#bootChooserControl') .change (function (event)t 
SIet( 


'/jqia2/action/fetchproductDetails', 发 起 GET 请 求 
{style: S$ (event.target) .val ()}, 


function(response) { 
$('#productDetailPane') .html (response); 


$('[value=""]',event.target) .remove(); 6 i 
); | 
I 
页 面 在 第 二 阶段 的 改变 很 小 ， 但 是 很 重要 。 我 们 调用 $ .get ()@O 来 取代 load() ， 传 人 相同 
的 URL 和 相同 的 请 求 参 数 。 因 为 $.get () 不 会 自动 把 啊 应 插入 到 DOM 中 的 任何 地 方 , 我 们 需要 
自己 来 做 这 件 事情 ， 可 以 通过 调用 html () 方 法 来 完成 @。 
这 个 版 本 的 页 面 代 码 可 以 从 http://localhost[:8080]/jqia2/chapter8/bootcloset/phase.2.html 找到 ， 


当 页 面 显示 出 来 后 ， 我 们 从 下 拉 列 表 中 选择 一 个 球 式 ， 就 会 看 到 一 个 GET 请 求 被 发 送出 来 ， 如 
图 8-5 所 示 。 


























办 Inspect Clear Profile 
Consolev HIML CSS Script DOM Net 
» CET http:/ /localhost:8080/jqia2 /action/fetchBootStyleOptions .- 
vw GET http:/ /localhost:8080/jqia2 /action/fetrchProductDetails?style=7332058 . 


Params Headers Response 


Options 
jquery-1..2.min,js (line 19) 
jquery—1...2.min,js (line 19) 





style 7332058 





图 8-5 现在 可 以 看 到 的 第 二 个 请 求 是 GET 而 不 是 PosT， 与 操作 相对 应 





GD type 参数 的 默认 值 会 根据 啊 应 头 中 定义 的 内 容 类 型 来 智能 确定 ， 比 如 content-Type:text/html 表示 响应 主 


体 为 HIML 片段 ，content-Type:application/json 表示 响应 主体 为 JSON 格式 的 字符 串 。 
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本 例 中 ,我 们 从 服务 器 返回 格式 化 的 HTML 并 把 它 插入 到 DOM 中 ,但 是 我 们 可 以 从 $ .get () 
的 type 参数 看 到 ， 除 了 HTML 之 外 还 可 以 使 用 其 他 很 多 类 型 。 事 实 上 ， 术 语 Ajax 是 作为 首 字 
母 缩写 AJAX 被 人 们 熟知 的 ， 其 中 XX 代表 XML。 

当 问 type 传人 xml ( 记 住 我 们 稍 后 会 详细 讨论 type 参数 ) 并 且 从 服务 右 返 回 XML 时 , 传 
入 回调 的 数据 是 解析 后 的 XML DOM。XML 的 灵活 性 非常 适合 处 理 本 质 上 高 度 分 层 的 数据 ,但 
是 遍历 和 获取 XML 的 数据 却 是 痛 否 的 。 下 面 来 看 男 一 个 jQuery 实用 也 数 ， 它 在 数据 需求 较为 简 
单 的 时 候 非 常 有 用 。 








8.3.2 ”获取 JSON 数 据 


在 前 一 节 我 们 谈 到 ， 当 XML 文档 从 服务 器 返回 时 ， 它 会 被 自动 解析 并 且 使 结果 DOM 可 供 
回调 吨 数 使 用 。 当 XML 显得 大 材 小 用 或 者 不 适合 作为 数据 传输 机 制 时 ， 一 般 会 使 用 JSON 来 代 
蔡 它 。 这 样 选 择 的 一 个 原因 是 JSON 非常 容易 融入 客户 端 脚本 .jQuery 可 以 使 这 个 操作 更 加 容易 。 

如 果 我 们 知道 响应 主体 将 会 是 JSON 的 时 候 , 调用 $.getJsoN () 实 用 函数 可 以 自动 地 解析 返 
回 的 JSON 字符 串 ， 使 结果 JavaScript 数据 项 可 供 该 函数 的 回调 孔 数 使 用 。 这 个 实用 消 数 的 语法 
如 下 所 示 。 


函数 语法 : $ .getJSON 


$.getJSON(url, parameters, callback) 
使 用 指定 的 URL 和 作为 查询 字符 串 的 任何 传 入 的 参数 来 向 服务 器 发 起 GET 请 求 。 把 响应 解 
析 为 JSON 字符 串 ， 并 且 把 结果 数据 传递 给 回调 函数 


Url (字符 串 ) 通过 GET 方法 接触 的 服务 器 端 资源 的 URL 
parameters ( 字符 事 | 对 象 | 数组 ) 指定 将 要 作为 请 求 参 数 传递 的 任何 数据 。 这 个 参数 


可 以 是 字符 串 (被 用 作 查 询 字 符 串 和 对象 (其 属性 被 序列 化 为 正确 编码 
的 参数 ， 这些 参数 会 被 传 入 请 求 ) 或 者 由 对 象 组 成 的 数组 ( 对 象 的 name 
和 value 属性 指定 了 名 称 / 值 对 ) 

callback ( 函数 ) 在 请 求 完成 的 时 候 调 用 的 函数 。 传 入 这 个 回调 的 第 一 个 参数 是 
把 响应 主体 作为 JSON 表示 法 解析 所 得 到 的 数据 值 ， 第 二 个 参数 是 状态 
文本 。 第 三 个 参数 提供 了 一 个 对 XHR 实例 的 引用 

返回 值 

XHR 实例 


有 时 我 们 想 从 服务 器 获取 数据 而 无 需 付 出 处 理 XML 的 开销 ， 那 这 个 函数 ( 只 是 个 type 为 
json 的 $ .get () 的 便捷 函数 ) 用 起 来 会 非常 棒 。 

当 需 要 发 起 GET 请 求 时 , jQuery 为 我 们 提供 了 强大 的 工具 $ .get () 和 $ .getJSON()，, 但 是 仅 
仅 依靠 GET 是 不 行 的 1 
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8.3.3 ”发 起 POST 请 求 


“有 时 你 想 要 坚果 ， 有 时 却 不 想 要 。”" 在 Almond Joy 和 Mounds 这 两 种 糖果 之 间 做 出 选择 和 
选择 向 服务 右 发 起 哪 种 请 求 的 心情 是 一 样 的 。 有 时 我 们 想 发 起 GET 请 求 ， 但 是 其 他 时 候 我 们 想 
(或 者 甚至 是 需要 ) 发 起 POST 请 求 。 

有 md eso te POST 而 不 是 GET。 首先 HTTP 协议 的 规定 是 ,POST 
用 于 任何 非 蝴 等 的 请 求 。 因 此 ， 如 果 请 求 有 可 能 导致 服务 需 端 状态 的 改变 (结果 是 响应 改变 了 )， 
那 就 应 该 使 用 POST a 此 外 ， 从 公认 的 惯例 和 约定 来 看 ， 当 要 癌 服 务 需 传递 的 数据 超出 了 查 
询 字符 串 中 可 以 通过 URL 传递 的 数量 一 一 这 个 限定 数量 因 浏 览 右 而 异 ， 此 时 就 必须 使 用 PosT 
操作 。 有 了 时候 ,我 们 接触 的 服务 妖 端 资源 可 能 只 支持 PosT 操作 ， 或 者 甚至 根据 请 求 所 用 的 方法 
是 GET 还 是 PosT 来 执行 不 同 功能 。 

对 于 那些 要 求 或 者 强制 使 用 POST 的 情况 ，jQuery 提供 了 $ .post() 实 用 肾 数 除了 采用 PosT 
HTTP 方法 ， 这 个 函数 的 运行 方式 类 似 于 $8 .get ()。 Re aang 











函数 语法 : $ .post 
$.post (url, parameters, callback, type) 
使 用 指定 的 URL 和 作为 请 求 主体 的 任何 传 入 的 参数 来 向 服务 器 发 起 POST 请 求 


了 了 (字符 串 ) 通过 POST 方法 接触 的 服务 器 端 资源 的 URL 

Parameters (字符 串 | 对 象 | 数组 ) 指定 将 要 作为 请 求 参 数 传 递 的 任何 数据 。 这 个 参数 可 以 
是 字符 串 (被 用 作 查 询 字 符 囊 和 对 象 ( 其 属性 被 序列 化 为 正确 编码 的 参数 ， 
这 些 参 数 会 被 传 入 请 求 ) 或 者 由 对 象 组 成 的 数组 ( 对 参 的 name 和 value 必 
性 指定 了 名 称 / 值 对 ) 

callback (函数 ) 当 请 求 完成 时 调用 的 函数 。 传 入 回调 的 第 一 个 参数 是 响应 主体 ， 第 
二 个 参数 是 状态 文本 。 第 三 个 参数 提供 了 对 XHR 实例 的 引用 

type (字符 串 ) (可 选 地 ) 指 po 全 可 以 是 这 些 类 型 中 的 一 种 : 
html、text、xml、json、script 或 者 jsonp。 查 看 $.ajax() 的 描述 以 
了 解 更 多 的 细 闻 

返回 值 

XHR 实例 





除了 发 起 PosT 请 求 , 使 用 $.post () 和 使 用 $.get () 是 一 样 的 .jQuery 会 负责 在 请 求 主体 ( 而 
不 是 查询 字符 串 ) 中 传递 请 求 数 据 的 细节 ， 并 且 设 置 合适 的 HTTP 方法 。 


OQ 这 是 1970 年 Peter Paul 公司 在 宣传 Almond Joy 和 Mounds 两 种 糖果 时 的 广告 语 ， 后 来 该 公司 被 好 时 公司 收购 。 
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现在 回 到 The Boot Closet 项 目 , 我 们 已 经 有 了 一 个 良好 的 开端 , 但 是 在 购买 一 双 靳 子 时 ， 只 
能 选择 蒜 式 是 远 远 不 够 的 ; 客户 肯 和 是 希望 选择 想 要 的 颜色 ， 而 且 当 然 也 需要 指定 鞭子 尺寸 。 我 们 
将 使 用 这 些 额 外 的 需求 来 展示 如 何 解 决 在 线 Ajax 论坛 中 经 和 常 被 问 到 的 问题 之 一 ， 就 是 ……… 


8.3.4 ”实现 级 联 下 拉 列 表 


级 联 下 拉 列 表 的 实现 ( 随后 的 下 拉 列 表 选 项 取决 于 之 前 在 下 拉 列 表 中 的 选择 ) 已 经 成 为 Ajax 
在 网 络 上 的 典型 应 用 。 虽然 你 会 发 现 数 以 千 计 ， 也许 是 数 以 万 计 的 解决 方案 , 但 是 将 在 The Boot 
Closet 页 面 上 实现 的 解决 方案 将 会 证 明 , 用 jQuery 来 实现 这 个 过 程 是 多 么 地 人 简单 。 
我 们 曾 介 绍 过 , 使 用 服务 器 提供 的 选项 数据 来 动态 地 加 载 下 拉 列 表 是 非常 方便 的 。 下 面 将 看 
到 通过 级 联 关 系 把 多 个 下 拉 列 表 绑 和 定 在 一 起 的 方法 ， 这 也 很 方便 。 
下 面 列 出 下 一 阶段 需要 对 页 面 做 出 的 改变 。 
口 添加 颜色 和 尺寸 的 下 拉 列 表 。 
口 当选 中 一 个 款式 时 ， 为 颜色 下 拉 列 表 添 加 可 供 当 前 款式 使 用 的 颜色 选项 。 
口 当选 中 一 个 颜色 时 , 为 尺寸 下 拉 列 表 添 加 可 供 当前 选中 的 球 式 和 颜色 组 合 使 用 的 尺寸 选项 。 
口 确保 三 个 下 拉 列 表 的 一 致 性 。 这 包括 新 创建 的 下 拉 列 表 被 使 用 过 一 次 后 ， 要 从 中 期 
除 --please make a selection-- 选 项 , 而且 还 要 确保 三 个 下 拉 列 表 绝 不 显示 一 个 无 效 的 
组 合 。 
我 们 打算 再 次 使 用 load() ， 这 次 强制 它 发 起 cET 请 求 而 不 是 PosST 请 求 。 这 并 不 意味 着 我 
们 有 任何 抵制 $ .get () 的 想法 ， 只 是 当 使 用 Ajax 加载 HTML 片段 时 ，1loadq() 看 起 来 更 加 自然 。 
首先 ， 来 看 看 用 来 定义 另外 几 个 下 拉 列 表 的 新 的 HTML 标记 。 为 选择 的 元 素 定 义 的 新 容 甫 
包含 三 个 市 有 标签 的 元 素 : 
<div id="selectionsPpane"> 
<label for="bootChooserControl">Boot style:</1label> 
<select id="bootChooserControl" name="style"></select> 
<label for="colorChooserControl">Color:</label> 
<select id="colorChooserControl" name="color" disabled="disabled"></select> 
<label for="sizeChooserControl">Size:</label> 


<select id="sizeChooserControl" name="size" disabled="disabled"></select> 
</div> 


之 前 的 球 式 选择 元 系 依 然 存在 , 并且 增 加 了 为 外 两 个 元 条 : 一 个 是 颜色 选择 元 素 ， 必 一 个 是 
八 寸 选择 元 条 ,每 一 个 都 被 初始 化 为 空 并 且 处 于 禁用 状态 。 

这 很 容易 ， 这 段 代 码 负责 在 页 面 中 添加 几 个 新 标记 。 下 面 来 诱 加 它们 的 行为 。 

球 式 选择 下 拉 列 表现 在 必须 履行 双重 职责 。 当 从 下 拉 列 表 中 选择 一 项 时 , 它 不 仅 需 要 继续 获 
取 并 显示 鞭子 的 详细 信息 ,而 且 其 改变 处 理 带 现在 还 必须 填充 并 启用 颜色 选择 下 拉 列 表 , 填充 的 
颜色 取 决 于 选中 的 款式 。 

首先 来 重 构 一 下 获取 详细 信息 的 代码 。 我 们 希望 使 用 1oaa() 但 是 也 希望 强制 发 起 GET 请 
求 而 不 是 之 前 发 起 的 PosT 请 求 。 为 了 让 1o0ad() 使 用 cET， 我们 需要 传递 一 个 字符 串 而 不 是 散 
列 对 象 ， 来 指定 请 求 参数 数据 。 和 幸运 的 是 , 在 jQuery 的 帮助 下 我 们 无 需 上 自己 创建 这 个 字符 串 。 
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修改 区 式 下 拉 列 表 的 改变 处 理 硕 ， 其 第 一 部 分 如 下 所 示 : 


$('#bootChooserControl') .change (function (event)t 
$('#productDetailPane') .load!l{ 
'/jqia2/action/fetchProductDetails', | 提供 查询 字符 串 
S (this).serialize() 


) ; 
//UUUU0D 
}); 





通过 使 用 serialize() 方 法 , 我 们 创建 了 球 式 下 拉 列 表 值 的 字符 串 表 示 ， 从 而 强制 10ag () 
方法 发 起 GET 请 求 ， 以 满足 需要 。 

改变 处 理 带 需要 执行 的 第 二 个 职责 是 ， 为 选中 的 炙 式 加 载 带 有 合适 值 的 颜色 选择 下 拉 列 表 ， 
然后 局 用 它 。 下 面 来 看 看 要 添加 到 处 理 带 的 其 余 代码 : 





$('#colorChooserControl').1loadl 
可 CO tetonColoroOptlions”, 获取 并 加 载 颜 色 选 项 
S (this) .serialize(), 


function()t 


s(this) .attr('disabled',false) 

S(! TSS USC ! 楚 用 和 清空 尺 6 启用 颜色 控件 
.attr('disabled',true,) 寸 控 件 
.html (""); 六 


} 
) 


这 上段 代码 应 该 看 起 来 很 熟悉 。 这 只 是 10ad() 的 另 一 种 用 法 ， 这 次 引用 了 一 个 名 为 
fetchColorOptions 的 动作 , 目的 是 返回 一 组 格式 化 的 <option> 元 素来 呈现 可 供 选 中 款式 (再 
次 被 作为 请 求 数据 传递 ) 使 用 的 颜色 人 @, 这 一 次 , 我 们 还 指定 了 一 个 要 在 cET 请 求 成 功 返 回响 应 
时 执行 的 回调 函数 。 

在 这 个 回调 函数 中 , 我 们 执行 了 两 个 重要 的 任务 。 首先, 启用 颜色 选择 控件 @@, 调用 10ad 7() 
会 插入 <option> 元 素 ， 但 是 如 果 填 充 之 后 不 启用 颜色 控件 的 话 它 仍然 将 处 于 禁用 状态 。 

其 次 ， 回 调 禁 用 并 且 清 空 了 尺寸 选择 控件 个， 但 这 是 为 什么 呢 ? ( 停顿 片刻 来 好 好 地 想 一 
想 。) 

尺寸 控件 在 款式 选择 器 的 值 第 一 次 改变 时 就 已 经 处 于 禁用 和 清空 状态 , 那 后 来 会 怎么 样 呢 ? 
如 果 客 户 在 选择 款式 和 颜色 后 ( 我们 将 会 很 快 看 到 尺寸 控件 的 填充 结果 ), 他 改变 了 选中 的 款式 ， 
会 怎么 样 9 因为 显示 的 尺寸 取决 于 款式 和 颜色 的 组 合 , 所 以 之 前 显示 的 尺寸 已 经 不 再 合适 , 也 不 
能 为 已 选择 项 呈现 一 致 的 界面 。 因 此 , 每 当 款 式 改 变 时 , 我 们 都 需要 清空 尺寸 选项 并 且 重 置 尺 十 
控件 到 其 初始 状态 。 

在 坐 下 来 享受 一 杯 可 口 的 饮料 之 前 , 还 有 很 多 的 工作 要 做 。 我 们 仍然 需要 为 颜色 选择 下 拉 列 
表 添 加 行为 ,以便 使 用 选中 的 款式 和 颜色 值 来 获取 并 加 载 尺 寸 选择 下 拉 列 表 。 完成 这 项 工作 的 代 
码 订 循 那 个 我 们 早已 熟悉 的 模式 : 

$('#colorChooserControl') .change (function (event)t 

Ss ("Haizechoosercontrol") .Lead 


'/jqia2/action/fetchSizeOptions', 
Ss ('#bootChooserControl,#colorChooserControl') .serialize(), 
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function()t 
s(this).attr('disabled',false); 
); 

}); 

在 一 个 改变 事件 中 ， 尺 寸 信息 是 通过 fetchsizeoptions 动作 来 获取 的 (传人 靴子 款式 和 
选中 的 颜色 )， 然 后 局 用 尺寸 控件 。 

还 有 一 件 事情 需要 完成 。 当 最 初 填充 每 个 下 拉 列 表 时 , 会 默认 显示 拥有 空白 值 和 显示 文本 为 
-Choose a something-- 的 <option> 元 素 。 你 可 能 会 想起 在 此 页 面 的 前 几 个 阶段 中 . 我 们 添 
加 代码 ， 以 便 在 从 球 式 下 拉 列 表 中 选择 一 项 时 删除 这 个 选项 。 

好 的 ， 我 们 可 以 为 球 式 和 颜色 下 拉 列 表 添 加 这 样 的 代码 到 改变 处 理 剖 ， 并 且 为 尺寸 下 
拉 列 表 添 加 这 样 的 行为 (目前 还 没有 为 尺寸 下 拉 列 表 绑 定 行为 )。 让 我 们 来 优雅 地 完成 这 个 
目的 。 

事件 模型 有 一 个 能 力 一 一 事件 冒 泡 ， 但 许多 Web 开发 人 员 往 往 忽 略 它 。 页 面 开发 者 通 稼 只 
关注 事件 的 目标 ， 而 忘记 了 事件 会 沿 大 DOM 树 向 上 冒 泡 ， 处 理 各 可 以 使 用 更 加 通用 的 方式 处 理 
事件 ， 而 不 是 在 目标 元 素 的 级 别 上 处 理 它们 。 

其 实 可 以 用 完全 相同 的 方式 从 这 三 个 下 拉 列 表 中 的 任 革 一 个 删除 拥有 空 昌 值 的 选项 , 而 不 管 
哪个 下 拉 列 表 才 是 事件 的 目标 。 方法 是 在 DOM 的 更 高 层次 创建 用 来 识别 和 处 理 改 变 事件 的 单个 
处 理 器 ， 从 而 避免 在 三 个 地 方 重复 相同 的 代码 。 

回忆 一 下 文档 结构 ， 三 个 下 拉 列 表 都 被 包含 在 id 为 selectionsPane 的 <div> 元 系 中 。 我 
们 可 以 使 用 一 个 监听 需 为 所 有 三 个 下 拉 列 表 删 除 临 时 选项 : 

$('#selectionsPane') .change (functIon(event) ({ 


Ss('[value=""]',event.target) .Yemove ( ) ; 


] 

任何 一 个 内 部 的 下 拉 列 表 发 生 改 变 事件 时 都 会 触发 这 个 监听 硕 ， 而 且 会 删除 事件 目标 (发生 
改变 的 下 拉 列 表 ) 上 下 文中 的 拥有 空 日 值 的 选项 。 这 是 不 是 很 灵活 ? 

使 用 事件 冒 泡 在 较 低级 别 的 处 理 器 中 避免 重复 相同 的 代码 ， 可 以 真正 提升 你 编写 脚本 的 
Re! 

这 样 我 们 就 完成 了 The Boot Closet 第 三 阶段 的 代码 ， 在 页 面 中 添加 了 级 联 下 拉 列 表 ， 如 
图 8-6 所 示 。 如 采 页 面 上 后 一 个 下 拉 列 表 中 的 值 取决 于 前 一 个 下 拉 列 表 的 选择 ， 我 们 就 可 以 使 用 
这 种 技术 。 这 个 阶段 的 页 面 可 以 从 URLhttp:/localhost[:8080]/jqia2/chapter8/bootclosetphase.3.html 
中 找到 。 
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四 OO | : The Boot Closet — Phase 3 = 


Choose your boots 


Boot styie: Color: Ev 一 choose size 一 


Item name: Caterplllar Tradesman Work Boot 
SKU: 7177382 
Helght: 6 inches 
Colors: Honey, Peanut 
Lining: Leather 
Today's price: $87.00 


Feastures: 
outsole. 





图 8-6 The Boot Closet 第 三 阶段 展示 了 实现 级 联 下 拉 列 表 是 多 么 地 容易 
这 个 页 面 的 完整 代码 如 代码 清单 8-6 所 示 。 
代码 清单 8-6 ”The Boot Closet， 现 在 拥有 级 联 下 拉 列 表 了 


<!IDOCTYPE html> 





<html> 
<head> 
<title>The Boot Closet &mdash; Phase 3</title> 
<link rel="stylesheet" type="text/css" href="../../styles/core.css'"> 


<link rel="stylesheet" type="text/css" href="bootcloset.css"> 

<link rel="icon" type="image/gif" href="images/favicon.gif"> 

<script type="text/javascript" 
src="../../scripts/jaquery-1.4.js"></script> 


<script type="text/javascript" 


src="../../scripts/jJqia2.support.js"></script> 
<script type="text/javascript"> 
Ss(function() { 


$('#¥bootChooserControl') 
.load('/jqia2/action/fetchBootStyleOptions').; 


图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 


™ 


238 第 8 革 使 用 Ajax 与 服务 器 通信 


$('#bootChooserControl') .change (function (event)t 
$('#¥productDetailPane') .1oad( 
'/jqia2/action/fetchProductDetails', 
S(this).serialize() 
人 
$('#colorChooserControl').loadl( 
'/jJqia2/action/fetchColorOptions', 
S (this) .serialize(), 
function()t 
$s (this).attr('disabled',false).; 
$('#sizeChooserControl') 
.attr('disabled',true) 
.html("").,; 


}); 


$('#¥colorChooserControl') .change (function (event)t 
$('#¥sizeChooserControl').loadl 
'/jqia2/action/fetchSizeOptions', 
$('#bootChooserControl,#colorChooserControl') .serialize(), 
function()t 
$s (this).attr('disabled',false).; 


}); 


$s('#¥selectionsPane') .change (function (event)t 
Ss('[value=""]',event.target) .remove(); 
}); 
}); 
</script> 
</head> 
<body> 


<div id="banner"> 
<img src="images/banner.boot.closet.png" alt="The Boot Closet"/> 


</div> 

<div id="pageContent"> 
<hl>Choose your boots</h1> 
<div> 


<div id="selectionsPpane"> 

<label for="bootChooserControl">Boot style:</1label> 

<select id="bootChooserControl" name="style"></select> 

<label for="colorChooserControl">Color:</1label> 

<select id="colorChooserControl" name="color" 
disabled="disabled"></select> 

<label for="sizeChooserControl">Size:</label> 

<select id="sizeChooserControl" name="size" 
disabled="disabled"></select> 


</div> 
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<div id="productDetailPane"></div> 


</div> 
<7adws 
</body> 
</html> 
如 上 所 示 , 有 了 1o0ad() 方 法 和 各 种 GET 和 posST 的 jQuery Ajax 函数 ,我们 就 可 以 对 如 何 发 
起 请 求 以 及 如 何在 请 求 完 成 时 公布 通知 进行 一 些 控制 。 但 是 有 时 我 们 需要 对 Ajax 请 求 进行 完全 
控制 ，jQuery 有 一 个 方法 可 以 实现 这 个 目的 。 


8.4 完全 控制 Ajax 请 求 


目前 为 止 ,我 们 介绍 了 适用 于 各 种 情况 的 函数 和 方法 ,但 是 有 时 我 们 想 目 己 控 制 所 有 的 细 闻 。 
本 记 将 探索 jQuery 如 何 让 我 们 运用 这 种 控制 权 。 


8.4.1 发 起 带 所 有 参数 的 Ajax 请 来 


如 果 我 们 想 要 或 者 需要 控制 Ajax 请 求 的 各 种 细节 ， 可 以 利用 jQuery 提供 的 名 为 $.ajax 1() 
的 通用 实用 也 数 来 发 起 Ajax 请 求 。 实际 上 , 所 有 其 他 用 来 发 起 Ajax 请 求 的 jQuery 功能 最 终 都 是 
使 用 这 个 函数 来 发 起 请 求 。 它 的 语法 如 下 所 示 。 

















函数 语法 : $ .ajax 
$ .ajax(options) 
使 用 传 入 的 选项 来 发 起 Ajax 请求 ， 以 便 控 制 如 何 创 建 请 求 以 及 如 何 通 知 回 调 
参数 


options (对象 ) 一 个 对 象 ， 其 属性 定义 了 这 个 操作 的 参数 。 详 情 参 见 表 8-2 
返回 值 
XHR 实例 








看 起 来 很 简单 , 不 是 吗 ? 但 是 不 要 被 表象 欺骗 了 。options 参数 可 以 指定 的 值 非常 多 , 它们 
可 以 调整 这 个 函数 的 操作 。 这 些 选 项 (按照 重要 性 和 使 用 频率 排序 ) 的 定义 参见 表 8-2。 


表 8-2 $.ajax() 实 用 函数 的 选项 


名 称 描 ” 述 
el (字符 串 ) 请 求 的 URL 
type (字符 串 ) 要 使 用 的 HTTP 方 法 。 通 常 是 PosT 或 者 GET。 如 果 省 略 则 默认 为 GET 
| (字符 串 | 对 象 数 组 ) 定义 将 要 作为 查询 参数 传人 请 求 的 值 。 如 果 请 求 是 GET， 则 把 数据 作为 





查询 字符 串 传 递 。 如 条 请 求 是 PoSsST, 则 把 数据 作为 请 求 主体 传递 。 无 论 哪 种 情况 ，$ .ajax () 
实用 函数 都 会 负责 对 值 进 行 编码 。 这 个 参数 可 以 是 字符 串 ( 被 用 作 查 询 字 符 串 )、 对 象 ( 其 属 
性 被 序列 化 ) 或 者 由 对 和 象 组 成 的 数组 ( 对象 的 name 和 value 属 性 指定 了 名称/ 值 对 ) 
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名 称 


( 续 ) 
描 ” 述 


(字符 串 ) 


字符 种 ) 一 个 关键 字 ， 用 来 识别 预计 由 响应 返回 的 数据 类 型 。 


dataType 


cache 


Context 


timeout 


global 


contentType 


SUCCESS 


个 工 工 避 工 


complete 


beforeSend 


async 


processData 


dataFilter 


ifModified 





这 个 参数 决定 在 向 回调 函数 








传递 数据 之 前 对 数据 的 后 期 处 理 ( 如 果 有 的 话 )。 有 效 值 如 下 所 示 
口 xml 一 一 将 响应 文本 作为 XML 文 档 解 析 并 将 结果 XML DOM 传 人 回调 函数 
口 html1 一 一 将 未 经 处 理 的 啊 应 文本 传人 回调 冰 数 。 对 返回 的 HTML 片段 中 的 任何 <script> 
块 求 值 
D json 一 一 将 啊 应 文本 作为 JSON 字 符 串 来 求 值 ， 并 且 将 结果 对 象 传人 回调 
D jsonp 一 一 除了 允许 远程 脚本 之 外 其 他 都 类 似 于 json， 假设 远程 服务 器 支持 jsonp 
口 script 一 一 将 啊 应 文本 传 入 回调 函数 ,在 调用 回调 函数 之 前 , 将 啊 应 作为 一 个 (或 多 个 ) 
JavaScript 语 句 来 处 理 
口 text 一 一 假定 响应 文本 是 普通 文本 
服务 需 资 源 负 责 设置 合适 的 content-type 啊 应 头 
如 果 省 略 这 个 属性 ， 则 会 将 啊 应 文本 传 入 回调 函数 而 不 做 任何 处 理 或 求 值 


(布尔 ) 如 果 为 false， 则 确保 浏览 带 不 会 缓存 响应 。 默 认为 Lrue， 除 非 指 定 dataType 为 
script 或 jsonp 


(元 系 ) 指定 某 个 元 系 为 与 这 个 请 求 相 关 的 所 有 回调 函数 的 上 下 文 


(数值 ) 为 Ajax 请 求 设置 以 毫秒 为 单位 的 超时 时 间 。 如 果 请 求 不 能 在 超时 时 间 到 期 之 前 完成 
则 会 终止 请 求 并 调用 处 理 错误 的 回调 函数 ( 如 有 果 有 定义 ) 


(布尔 ) 如 果 为 false， 则 禁止 触发 全 局 Ajax 事件 。 这 个 事件 是 jQuery 特定 的 自 定 义 事件 ， 
它们 会 在 处 理 Ajax 请 求 进程 中 的 各 个 时 间 点 或 条 件 下 触发 。 我们 会 在 8.4.3 节 中 详细 讨论 这 些 事 
件 。 如 果 省 略 ， 则 默认 值 ( true ) 表示 要 启用 全 局 事件 触发 


(字符 串 ) 指定 请 求 内 容 的 类 型 。 如 果 省 略 ， 则 默认 值 为 application/x-www-form- 
urlencoded， 与 表单 提交 所 使 用 的 默认 值 的 类 型 相同 


(函数 ) 如 果 对 请 求 的 响应 显示 的 是 成 功 状 态 码 则 调用 此 函数 。 将 响应 主体 作为 这 个 函数 的 
第 一 个 参数 返回 ,并 且 根 据 aataType 属 性 的 规范 来 对 其 进行 求 值 。 第 二 个 参数 是 包含 状态 值 
的 字符 串 在 这 种 情况 下 ， 总 是 success。 第 三 个 参数 提供 了 一 个 对 XHR 实 例 的 引用 

( 函数 ) 如 果 对 请 求 的 啊 应 返回 的 是 错误 状态 码 则 调用 此 上 数 。 传 人 这 个 函数 的 参数 有 三 个 : 
XHR 实 例 、 状 态 消息 字符 串 〈 在 这 种 情况 下 ， 是 error 、timeout 、notmodified 或 者 
parseerror 之 一 ) 以 及 可 选 的 异常 对 象 ( 有 时 从 XHR 实 例 返 回 ， 如 果 有 的 话 ) 

( 子 数 ) 在 请 求 结 束 时 调用 的 函数 。 传 入 的 参数 有 两 个 : XHR 实 例 和 状态 信息 字符 串 
( success 或 error )， 如 果 也 指定 了 success 或 error 回 调 函 数 ， 则 会 在 调用 回调 函数 之 后 
调用 该 也 数 

( 函数 ) 在 发 起 请 求 之 间 调 用 的 图 数 。XHR 实 例 被 传人 这 个 函数 ， 它 可 以 用 来 设置 自 定 义 头 
或 者 执行 其 他 预 请 求 操 作 。 从 这 个 处 理 需 返回 false 将 会 取消 请 求 

(布尔 ) 如 果 指 定 为 false， 则 将 请 求 作为 同步 请 求 来 提交 。 黑 认 请 求 是 异步 的 

(布尔 ) 如 果 设 置 为 false， 则 阻止 将 传人 的 数据 处 理 为 URL 编 码 的 格式 。 默 认 情 况 下 ， 数 
据 被 处 理 为 URL 编 码 格式 ， 该 格式 适合 与 请 求 类 型 application/x-www-form-urlencoded 
一 起 使 用 

( 函数 ) 用 来 第 选 啊 应 数据 的 回调 函数 。 癌 这 个 函数 传人 原始 的 啊 应 数据 和 qataType 值 ， 
这 个 函数 会 返回 “净化 ”后 的 数据 

(布尔 ) 如 果 设 置 为 Lrue， 则 只 有 当 啊 应 内 容 相 对 于 上 次 请 求 改变 (根据 Last-Modified 




































































头 的 设置 ) 时 ， 请 求 才 被 认为 是 成 功 的 。 如 果 省 略 ， 则 不 会 进行 头 检测 。 默 认为 false 
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( 续 ) 

名 称 描 述 
jsonp (学 符 串 ) 指定 一 个 查询 参数 名 称 来 履 盖 默认 的 jsonp 回 调 参数 名 cal11back 
username (字符 串 ) 在 HTTP 认 证 请 求 中 使 用 的 用 户 名 
password (字符 串 ) 在 HTTP 认 证 请 求 中 使 用 的 密码 
ScriptChareet (字符 串 ) 当 远 程 和 本 地 内 容 使 用 不 同 的 字符 集 时 ， 用 来 设置 script 和 3jsonp 请 求 所 使 用 

的 字符 集 

pd 《函数 ) 用 来 提供 XHR 实 例 自 定义 实现 的 回调 也 数 
traditional (布尔 ) 如 有 果 为 true， 则 使 用 传统 风格 的 参数 序列 化 。 参 见 第 6 划 中 有 关 $ .param () 的 描述 


以 获取 参数 序列 化 的 详细 信息 


要 跟踪 的 选项 有 很 多 , 但 是 任何 一 个 请 求 都 不 可 能 用 到 太 多 选项 。 昌 然 如 此 , 但 是 当 我 们 计 
划 发 起 大 量 请 求 时 ， 如 果 能 为 页 面 上 的 这 些 选 项 设置 默认 值 包 不 是 很 方便 ? 





8.4.2 ”设置 请 求 默认 值 

很 明显 上 一 市 最 后 的 问题 是 一 个 隐 阱 。 你 可 能 已 经 狂 到 , jQuery 为 我 们 提供 了 一 种 方式 来 定 
义 一 组 上 默认 的 Ajax 属性 值 ， 如 打 没 有 履 凑 这些 属 性 的 值 ， 则 会 使 用 这 些 默认 值 。 如 果 要 发 起 很 
多 相似 的 Ajax 请 求 ， 这 可 以 简化 页 面 。 

用 来 设置 Ajax 殉 认 值 列表 的 图 数 是 $.ajaxSsetup () ， 其 语法 如 下 所 未 。 














浮 数 语法 : $ .ajaxSetup 


$ .ajaxSetup (options) 


把 传 入 的 一 组 选项 属性 创建 为 随后 调用 $.ajax() 的 默认 值 





参数 

options ( 对象 ) 对 象 实例 ， 其 属性 定义 了 一 组 默认 的 Ajax 选项 。 这 些 属性 与 表 8-2 
描述 $.ajax() 函数 的 属性 完全 一 样 。 这 个 函数 不 应 该 用 来 设置 成 功 、 出 错 
和 完成 时 的 回调 处 理 器 (我们 将 会 在 8.4.3 节 看 到 如 何 使 用 另外 一 种 替代 方 
法 来 设置 这 些 回 调处 理 器 。) 

返回 值 

未 定义 





在 脚本 处 理 的 任意 时 刻 ， 通 常 在 页 面 加 和 载 时 (不 过 页 面 开发 者 可 以 目 由 选择 任何 时 间 点 )， 
可 以 使 用 这 个 也 数 为 随后 所 有 S$ .ajax() 调 用 设置 默认 值 。 





注意 D0000000000000000 1caa00000000$.get()0 $$.post()0 0 
DUDDODD0DUDOUUIDUD HITPFUDDUUUUUUUD type DD cer UUUD0 
s.post()[|| [| HTTPL GETIL UO 
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假设 要 创建 一 个 包含 大 多 数 Ajax 请 求 的 页 面 〈 使 用 实用 六 数 来 创建 ， 而 不 是 1oad () 方 法 )， 
我 们 希望 设置 一 些 默 认 值 ， 以 免 在 每 次 调用 时 都 指定 它们 。 我 们 可 以 在 页 面 涉 部 的 <script> 元 
素 的 第 一 行 编写 这 样 的 代码 : 
S .a]axSetup (1{ 
type: 'POST', 
timeout: 5000, 
dataType: ‘html' 
J 


这 将 会 确保 随后 的 每 个 Ajax 调用 (除了 前 面 提 到 的 lo0ad() 方 法 ) 都 会 使 用 这 些 秋 认 值 ， 除 
非 使 用 传人 Ajax 实用 函数 的 属性 来 显 式 地 覆盖 它们 。 
现在 ， 该 怎么 处 理 之 前 提 过 的 那些 通过 global 选项 控制 的 全 局 事件 呢 ? 


8.4.3 ”处 理 Ajax 事 件 


在 执行 jQuery 的 Ajax 请 求 的 过 程 中 ，jQuery 会 触发 一 系列 的 自 定 义 事件 ， 我 们 可 以 为 这 
事件 建立 处 理 絮 ,以便 跟踪 请 求 的 进展 , 或 者 在 此 过 程 中 的 不 同时 间 点 采取 行动 。jQuery 将 这 
事件 分 类 为 局 部 事件 和 全 局 事件 。 

局 部 事件 由 回调 函数 来 处 理 , 可 以 直接 通过 $ .ajax() 阴 数 的 beforeSend、 success、error 
以 及 complete 选项 来 指定 局 部 事件 , 或 者 间接 地 通过 向 便捷 方法 提供 一 些 回 调 也 数 来 指定 局 部 
事件 ( 反 过 来 ,还 是 使 用 $ .ajax() 函数 来 发 起 真正 的 请 求 )。 每 当 为 任何 jQuery 的 Ajax 函数 注 
册 回 调 函 数 时 ， 我 们 一 二 都 在 处 理 局 部 事件 ， 甚 至 没有 意识 到 局 部 事件 的 存在 。 

全 局 事件 是 像 jQuery 中 其 他 日 定义 事件 那样 被 触发 的 事件 ,可 以 通过 bind () 方 法 来 为 其 创 
建 事件 处 理 融 ( 和 任何 其 他 事件 一 样 ) .这些 全 局 事件 ( 很 多 都 和 局 部 事件 相对 应 ) 有 :ajaxstart、 
ajaxSend、 ajaxSuccess、ajaxError、 ajaxStop 以 及 ajaxCcomplete。 

全 局 事件 在 被 触发 时 会 广播 到 DOM 中 的 每 个 元 条 上 ,因此 可 以 在 所 选择 的 任何 单个 或 者 多 
个 DOM 元 素 上 创建 这 些 处 理 带 。 当 执行 的 时 候 ， 处 理 带 的 函数 上 下 文 被 设置 为 在 其 上 创建 处 理 
器 的 DOM 元 素 。 

为 无 需 考虑 冒 泡 层 次 ， 所 以 我 们 可 以 在 任何 元 素 上 创建 处 理 副 ， 以 便 能 通过 this 快速 访 
问 此 元 素 。 如 末 不 关心 特定 的 元 素 ， 那 么 可 以 只 在 <boqy> 上 创建 处 理 器 ， 因 为 没有 别 的 更 合适 
的 位 置 了 。 但 是 如 采 需 要 对 元 系 做 一 些 特定 的 处 理 ， 比 如 在 Ajax 请 求 过 程 中 显示 或 隐藏 动画 图 
请， 那么 就 可 以 在 这 个 元 素 上 创建 处 理 带 ， 以 便 通 过 也 数 上 下 文 来 轻松 访问 这 个 元 素 。 

除了 函数 上 上 下文， 还 可 以 通过 参数 传递 给 处 理 器 传递 其 他 可 用 人 信息。 通常 来 说 这 些 参数 有 : 
jQuery .Event 实例 、XHR 实例 以 及 传递 给 $ .ajax() 的 选项 。 

这 个 参数 列表 的 异常 情况 如 表 8-3 中 所 述 , 该 表 按 照 事件 触发 的 顺序 列 出 了 jQuery 的 Ajax 事件。 

表 8-3 jQuery Ajax 事件 类 型 














此 
此 















































事件 名 称 类 型 描 述 
ajaxStatt 全 局 当 Ajax 请 求 开 始 时 触发 ， 只 要 没有 其 他 请 求 处 于 激活 状态 。 对 于 并 发 的 请 求 ， 这 
个 事件 只 会 为 第 一 个 请 求 触发 
不 传递 任何 参数 
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( 续 ) 
有 
beftorepend 局 部 在 发 起 请 求 之 前 调用 ， 以 便 人 允许 在 向 服务 需 发 送 请 求 之 前 修改 XHR 实 例 ， 或 者 通 

过 返回 false 来 取消 请 求 
ajaxSend 全 局 在 发 起 请 求 之 前 触发 ， 为 了 人 允许 在 向 服务 器 发 送 请 求 之 前 修改 XHR 实 例 
success 届 部 当 请 求 返回 一 个 成 功 的 啊 应 时 调用 
ajaxSuccess 全 局 当 请 求 返 回 一 个 成 功 的 啊 应 时 触发 
error 局 部 当 请 求 返回 一 个 错误 的 响应 时 调用 
ajaxError 全 局 当 请 求 返回 一 个 错误 的 啊 应 时 触发 。 传 递 的 第 四 个 参数 指向 抛 出 的 错误 〈 如 采 有 
的 话 ) 
complete 局 部 当 请 求 结 束 时 调用 ， 而 不 管状 态 如 何 。 即 便 是 同步 的 请 求 也 会 调用 这 个 回调 函数 
ajaxComplete 全 局 当 请 求 结 束 时 触发 ， 而 不 管状 态 如 何 。 即 便 是 同步 的 请 求 也 会 调用 这 个 回调 函数 
ajaxStop 全 局 当 Ajax 请 求 结束 并 且 没 有 其 他 并 发 的 请 求 处 于 激活 状态 时 触发 。 不 传递 任何 参数 


再 次 强调 ( 为 了 清晰 起 见 )， 局 部 事件 表现 为 传递 给 $.ajax()( 及 其 相关 的 便捷 函数 ) 的 回 
调 函 数 ， 而 全 局 事件 是 被 触发 的 目 定 义 事 件 ,， 可 以 通过 建立 处 理 融 来 处 理 这 类 事件 ， 就 像 其 他 的 
事件 类 型 一 样 。 

除了 使 用 binqa() 来 创建 事件 处 理 锅 ，jQuery 还 提供 了 一 组 方便 的 孔 数 来 创建 处 理 融 ， 如 下 
所 未 。 








方法 语法 : jQuery Ajax 事件 创建 器 
ajaxComplete (callback) 
ajaxError (callback) 
ajaxSend (callback,) 
ajaxStart (callback) 
ajaxStop (callback,) 
ajaxSuccess (callback) 8 
把 传 入 的 回调 创建 为 通过 方法 名 称 指定 的 jQuery Ajax 事件 的 事件 处 理 器 
参数 
callback (函数 ) 创建 为 Ajax 事件 处 理 器 的 函数 。 函 数 上 下 文 ( this ) 是 在 其 上 创建 
处 理 器 的 DOM 元 素 。 可 以 传 入 回调 的 参数 如 表 8-3 所 列 
返回 值 


包装 集 





下 面 来 完成 一 个 简单 的 例子 ， 看 看 如 何 使 用 这 些 事件 方 法 来 轻松 地 跟踪 Ajax 请 求 的 进度 。 
测试 员 面 (大 简单 了 简直 不 能 称 之 为 实验 室 ) 的 布局 如 图 8-7 所 示 , 可 以 通过 URL http://localhost 
[:8080]/jqgia2/chapter8/ajax.events.html 来 访问 。 
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BoOO Ajax Events Test ce 
Rs 有 x 日 http:/ /localhost/jqia2 /chapter8 /ajax.events,html | 


# of requests: 1 Good | Bad | 





图 8-7 ”页面 的 初始 布局 ， 用 来 考察 jQuery Ajax 事件 ( 通过 触发 多 个 事件 并 观察 
处 理 器 来 进行 考察 ) 

这 个 页 面 展示 了 三 个 控件 :一 个 计数 字段 、 一 个 Good 按钮 以 及 一 个 Bad 按钮 。 这 些 按钮 用 
来 发 出 若干 请 求 ， 请 求 的 个 数 由 计数 字段 指定 。Good 按钮 将 向 有 效 的 资源 发 出 请 求 ， 而 Bad 按 
钮 将 向 无 效 的 资源 发 出 指定 个 数 的 以 失败 告终 的 请 求 。 

我 们 也 在 页 面 的 就 绪 处 理 器 中 创建 了 很 多 事件 处 理 器 ， 如 下 所 示 : 


(bad) Bind 
'ajaxStart ajaxStop ajaxSend ajaxSuccess ajaxError ajaxComplete', 
function(event){ sayl(event.type); } 


); 

这 段 代 码 为 每 一 种 jQuery Ajax 事件 类 型 创建 处 理 带 ,以便 向 页 面 “控制 台 ”( 放 在 控件 的 下 
方 ) 输出 消息 ， 显 示 被 触发 的 事件 类 型 。 

保持 请 求 数 为 1， 单 击 Good 按钮 并 观察 结果 ,你 将 会 看 到 每 个 jQuery Ajax 事件 类 型 按照 其 
在 表 8-3 中 描述 的 顺序 依次 触发 。 但 是 为 了 理解 ajaxstart 和 ajaxStop 与 众 不 同 的 行为 ， 请 
设置 计数 控件 的 值 为 2， 然 后 单 击 Good 按钮 。 你 会 看 到 页 面 显 示 如 图 8-8 所 示 。 


BoOO Ajax Events Test Cc 























(sy Ney © http:/ /localhost/jqia2/chapter8 /ajax.events.html 


# of requests: 2 | Good | L_Bad _ | 
At 23:03:11.024 - ajaxStart 

At 23:03:11.026 - ajaxSend 

At 23:03:11.029 - ajaxSend 

At 23:03:11.041 ~ ajaxSuccess 

At 23:03:11.043 - ajaxComplete 

At 23:03:11.045 - ajaxSuccess 

Ar 23:03:;11.046 - ajaxComplete 

At 23:03:11.047 - ajaxStop 


hh 





图 8-8 ” 当 多 个 请 求 处 于 激活 状态 时 ， 就 会 在 一 组 请 求 而 不 是 单个 请 求 上 调用 ajaxstart 
和 ajaxStop 事件 


在 这 里 可 以 看 到 , 当 多 个 请 求 处 于 激活 状态 时 , ajaxSstart 和 ajaxStop 事件 在 一 组 完整 的 
并 发 请 求 上 只 被 触发 一 次 ， 而 其 他 事件 类 型 会 在 每 个 请 求 上 都 被 触发 。 

现在 尝试 单 击 Bad 按钮 来 生成 一 个 无 效 的 请 求 ， 然 后 观察 事件 行为 。 

在 进入 下 一 草 之 前 ， 最 好 先 把 这 些 重 要 的 知识 应 用 起 来 。 
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8.5 ”整合 所 有 知识 


现在 来 介绍 男 一 个 综合 示例 。 把 目前 学 到 的 所 有 知识 每 样 都 应 用 一 些 : 选择 若 、DOM 操作 、 
高 级 JavaScript、 事 件 、 特 效 以 及 Ajax。 更 棱 的 是 ， 我 们 将 实现 男 一 个 上 自 定义 jQuery 方法 1 

对 于 这 个 示例 ， 我 们 将 再 次 回 到 The Boot Closet 页 面 。 为 了 回顾 ， 请 查看 网 8-6 来 回忆 在 哪 
里 中 断 了 ， 因 为 我 们 将 会 继续 改善 这 个 页 面 。 

在 待 售 靳 子 的 详细 信息 中 (参见 图 8-6 )， 有 一 些 客 户 可 能 不 熟悉 的 术语 一 一 比如 Goodyear 
welt 和 stitch-down construction。 我 们 希望 使 客户 能 够 很 容易 地 了 解 这 些 术 请 的 含义 , 因为 知情 的 
客户 通常 是 快乐 的 客户 而 快乐 的 客户 乐于 掏 钱 购物 ! 我 们 喜欢 如 此 。 

可 以 完全 照搬 1998 年 的 设计 风格 ， 我 们 可 以 提供 术语 表 页 面 ， 把 用 户 导 航 到 该 页 面 以 便 参 
考 , 但 是 这 样 会 使 用 户 的 焦点 离开 我 们 所 期 望 的 地 方 一 一 客户 可 以 购买 东西 的 页 面 。 我 们 可 以 更 加 
时 尚 一 点 , 弹出 一 个 术语 提示 , 甚至 显示 用 户 有 疑问 的 术语 定义 页 面 。 但 是 即便 如 此 还 是 有 点 过 时 。 

如 果 你 再 进一步 思考 ， 可 能 就 会 想 知 道 当 客户 的 鼠标 指针 在 术语 上 停留 时 ， 是 否 可 以 使 用 
DOM 元 系 的 title 特性 来 显示 一 个 包含 术语 定义 的 提示 框 (tooltip， 有 时 也 被 称 为 flyout )。 好 
主意 ! 这 就 可 以 就 地 显示 术语 定义 而 无 需 让 客户 转移 焦点 。 

但 是 使 用 title 特性 会 种 来 一 些 问题 。 首 先 ， 只 有 当 有 鼠标 指针 在 元 系 上 仿 留 儿 秒 之 后 才能 
显示 提示 框 ， 而 我 们 希望 能 够 更 加 明显 一 点 , 单 击 术 语 后 立即 显示 信息 。 但 更 重要 的 是 ,一些 济 
览 胡 将 会 规 断 title 提示 文本 ， 那 个 限定 长 度 对 我 们 来 说 太 短 了 了 。 

因此 我 们 要 创建 自己 的 提示 框 ! 

我 们 将 以 某 种 方式 来 找到 拥有 定义 的 术语 , 改变 它们 的 显示 以 便 用 户 能 轻松 识别 这 类 可 单 击 
的 元 系 〈 赋予 这 些 元 素 被 称 为 “邀请 参与 ”的 样式 )， 设 置 这 些 元 素 ， 以 便 忌 标 单 击 元 素 时 会 显 
示 一 个 包含 术语 摘 述 信息 的 提示 框 。 随 后 单 击 提 示 框 将 会 从 显示 带 上 删除 它 。 

我 们 还 打算 把 它 编写 为 通用 的 可 重用 插件 ， 因 此 需要 确保 两 件 非常 重要 的 事情 : 

口 没有 任何 特定 于 The Boot Closet 的 便 编 码 ; 

口 在 样式 和 布局 方面 赋予 页 面 开 发 者 最 大 程度 的 灵活 性 〈 在 合理 的 范围 内 )。 

我 们 将 这 个 新 插件 称 为 Termifier (术语 提示 带 )， 岁 8-9a ~ 图 8-9c 显示 的 是 页 面 的 一 部 分 ， 
显示 了 我 们 要 添加 的 行为 。 





















































Lining: Leather 
Today's price: $87.00 


Features: Full-grain oll-tanned leather. Nylon mesh lining. Ortholite sock 
outsole. 也 





图 8-9a 术语 Full-grain 和 oil-tanned 已 经 被 设置 为 使 用 便捷 的 新 插件 来 添加 术语 提示 行为 
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Lining: Leather 
Today's price: $87.00 


E All?tanne Pane nn eS silols tholite sock 
Leather which has not been altered beyond 
hair removal, Full-grain leather is the most 
genuUine type of leather, as it retains all of the 
original texture and markings of the original 
hide. 


Leather 


$87.00 
Leather Which has not been sitered 


Full-g beyond hair removal. Full-grain Ortholite sock 
leather is the most genuine type of 
leather, as it retains all of the original 
texture and markings of the original 
hide, 





图 8-9c ”拥有 更 加 时 尚 样式 的 Termifier 面板 一 一 我 们 需要 给 予 插件 用 户 这 种 灵活 性 


在 图 8-9a 中 ， 我 们 看 到 术语 Full-grain 和 oil-tanned 的 描述 项 目 高 之 显示 。 单 击 Full-grain 
会 使 包含 术语 定义 的 Termifier 提示 框 显示 出 来 ， 如 图 8-9b 和 图 8-9c 所 示 。 如 图 8-9b 中 所 示 ， 
我 们 提供 了 一 些 相当 简单 的 CSS 样式 , 而 图 8-9c 则 略 显 华丽 。 我 们 需要 确保 插件 代码 允许 这 种 
灵活 性 。 

下 面 就 米 开 始 吧 。 





8.5.1 实现 Termifier 





你 可 能 还 记得 ， 添 加 jQuery 方法 是 通过 使 用 $ .fn 属性 来 完成 的 。 因 为 我 们 已 经 把 新 插件 称 
为 Termifier， 所 以 给 这 个 方法 起 名 为 termifier ()。 

termifier() 方 法 将 负 贡 设置 匹配 集中 的 每 个 元 系 以 实现 如 下 目的 : 

口 在 每 个 匹配 元 素 上 建立 click 处 理 融 用 来 显示 Termifier 提示 框 ; 

口 一 旦 单 击 元 杂 ， 将 会 使 用 服务 絮 端 资源 来 查找 当前 元 双 定 义 的 术语 ; 

口 一 旦 接收 到 啊 应 ， 将 会 使 用 淡 入 特效 来 在 提示 框 中 显示 术语 的 定义 ; 

口 将 提示 框 设置 为 一 旦 在 其 邦 围 内 单 击 就 会 淡出 ; 

口 服务 需 端 资源 的 URL 将 会 是 唯一 必需 的 参数 ， 所 有 其 他 的 选项 都 将 拥有 合理 的 默认 值 。 

这 个 插件 的 语法 如 下 所 示 。 
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方法 语法 : termifier 
termifier (url, options) 
把 包装 元 素 设 置 为 Termifier 项 。 为 所 有 的 包装 元 素 添 加 类 名 termified 
al (字符 囊 ) ee 器 端 动作 的 URL 
options (对象) 指定 下 列 选 
D paramName 用 > 器 端 动作 的 请 求 和 参数 名 称 。 如果 省略， 则 
使 用 默认 值 term 
D addClass 添加 到 生成 的 Termifier 面板 的 外 部 容器 的 类 名 。 这 是 除了 类 名 
termifier 之 外 还 要 添加 的 类 名 ， 而 termifier 总 是 会 被 添加 的 
一 个 包 念 属性 top 和 left 的 散 列 对 象 ， 用 来 指定 Termifier 面板 相 
对 光标 位 置 的 偏 移 量 。 如 果 省 略 ， 则 面板 的 原点 将 会 被 正好 放置 在 光标 位 置 
DD zIndex 要 赋值 给 Termifier 面板 的 z-index。 默 认 值 为 100 











DD origin 





我 们 在 名 为 jquery.jqia.termifier.js 的 文件 中 创建 新 termifier() 方 法 的 框架 ， 以 便 开始 实现 
上 述 目标 : 
(function(S$)t 


Ss.fn.termifier = function(actionURL,options) { 


return this: 


1 
1 (OUery)s 
这 个 框 染 使 用 了 第 7 章 提 到 的 模式 来 确保 我 们 可 以 在 实现 中 目 由 地 使 用 $， 并 且 可 以 通过 回 
fn 原型 添加 新 柄 数 来 创建 包装 需 方 法 。 另 外 要 注意 如 何 正 确 地 创建 返回 值 以 确保 新 方法 和 jQuery 
链 能 够 运行 恨 好 。 
现在 该 处 理 选项 了 。 我 们 硕 望 将 用 户 提供 的 选项 与 目 己 的 默认 信 合 并 起 来 : 





var settings = S$.extend (1{ 
origin: {top:0,1left:0}, 
ParamName: 'term', 


addClass: null, 
actionURL: actionURL 
J sl| | 1 


之 前 曾经 抑 过 这 个 模式 ， 因 此 无 需 再 次 讨论 它 的 操作 ， 但 是 请 注意 添加 actionURL 参数 值 
到 settings 变量 的 方式 。 这 将 会 为 即将 创建 的 闭 包 收集 所 有 稍 后 要 用 的 值 到 一 个 整洁 的 地 方 。 
收集 到 所 有 的 数据 后 ， 我 们 现在 将 继续 在 包装 元 素 上 定义 用 来 创建 和 显示 as 面板 的 
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单 击 处 理 锅 。 开 始 创建 该 处 理 硕 ， 如 下 所 示 : 


this.click(function(event)t 
$s('div.termifier').remove(); 
/7 
// UUUUUDU termifier 
// 


Iss 
当 单 击 一 个 termified 元 素 后 ,我 们 希望 在 创建 新 的 Termifier 面板 之 前 删除 任何 先前 已 经 


存在 的 面板 。 和 否则 , 这 些 面 板 将 会 散落 到 屏幕 的 各 个 地 方 , 因此 要 找 出 所 有 以 前 的 实例 并 从 DOM 
中 删除 它们 。 


站 注意 0000000000000000 Temitier0000000 


有 了 这 些 ， 我们 就 可 以 开始 创建 Termifier 面板 的 结构 了 。 你 可 能 认为 我 们 需要 做 的 所 有 事情 
就 是 创建 用 来 放置 术语 的 定义 的 单个 <aiv> ， 尽 管 这 样 能 够 行 得 通 ， 但 也 限制 了 提供 给 插件 用 户 
的 选项 。 考 虑 图 8-9c 所 示 的 例子 ， 在 该 例 中 文本 需要 与 背景 “气泡 ”图 片 完美 地 结合 在 一 起 。 

因此 我 们 将 创建 一 个 外 部 <aiv> 和 一 个 用 来 存放 文本 的 内 部 <aiv>。 这 不 仅仅 对 于 布局 有 帮 
助 , 考虑 图 8-10 的 情况 , 在 该 例 中 超出 定 高 的 结构 与 文本 将 会 目 适 应 。 内 部 <aiv> 人 允许 页 面 开 发 


者 使 用 CSS 规则 overflow 来 为 提示 框 文本 添加 滚动 条 。 














TodaY's price: $187.00 
A brand of boot and shoe sole a 
Features: Full-grain leather uppers. Leather lining. Vibrar created by Vitale Bramani in the 
1930's, orginally for climbing 0 
boots. They are easily identified by 
the distinctive yellow Vibram 久 3 
octagon. The Vibram® brand s T 








图 8-10 有 两 个 可 供 操作 的 <aiv> 元 素 为 页 面 开发 者 提供 了 -一些 发 挥 的 余地 (例如 深 
动 内 部 文本 ) 


下 面 来 创建 外 部 <div> 的 代码 : 
Sted) @@ 创建 外 部 <aiv> 


.addClass('termifier' + 
(settings.addClass ? (' ') + settings.addClass : '')) @ 添加 类 名 
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-CSS (L{ 
lolol ne en te 设置 CSS 位 置 
top: event.pageY - settings.origin.top, 


left: event.pageX - settings.origin.1left, 
display: 'none,'! 
}) 单 击 时 从 显示 器 上 删 
.click(function(event)t 除 此 元 素 
$s (this).fadeOut('slow'); 
}) 
.appendTo ('body') @ 附加 到 DOM 中 


在 这 段 代 码 中 ， 我 们 创建 了 一 个 新 的 <div> 元 素 @ 并 有 旦 调整 这 个 元 素 。 首 先 ， 把 类 名 
termifier 赋值 给 这 个 元 素 @ 以 便 以 后 方便 找到 它 ， 同 时 也 给 予 了 页 面 开发 者 放置 CSS 规则 的 
固定 位 置 。 如 果 调 用 者 提供 了 addclass 选项 ， 则 也 会 为 元 素 添 加 这 个 类 。 

然后 应 用 了 一 些 CSS 样式 合 , 在 这 里 做 的 所 有 工作 是 使 整个 功能 运转 所 必需 的 最 低 条 件 ( 我 
们 允许 页 面 开发 者 通过 CSS 规则 提供 额外 的 样式 )。 这 个 <div> 元 系 最 初 是 隐藏 的 ， 它 补 绝 对 定 
位 在 鼠标 事件 的 位 置 ， 由 调用 者 提供 的 任何 origin 来 调整 。 后 者 允许 页 面 开 发 者 调整 位 置 从 而 
使 图 8-9c 中 的 气泡 箭头 出 现在 单 击 位 置 。 

在 那 之 后 , 我 们 建立 了 一 个 单 击 事 件 处 理 带 人 @， 用 来 在 单 击发 生 时 从 显示 带 上 删除 元 素 。 最 
后 ， 元 素 被 附加 到 DOM 中 人 @。 

好 的 ， 到 目前 为 止 一 切 还 不 错 。 现 在 需要 创建 内 部 的 <aiv>〈 用 来 包含 文本 的 元 系 ) 并 把 它 
追加 到 刚刚 创建 的 元 素 中 ， 继 续 编 写 代 码 ， 如 下 所 示 : 






































.apPenad ( @O 把 内 部 <aiv> 追 加 到 外 部 <aiv> 内 
Ss('<div>"). Loadl 
settlingye. actionURaE, @ 获取 并 向 <div> 中 插入 定义 
encodeURIComponent (settings.paramName) + '=' + | 
encodeURIComponent ($ (event.target) .text()), 3 提供 术语 


function()t 
$s (this) .closest('.termifier').fadeIin('slow'); 6 使 termifier 淡 入 视野 
) 
注意 ， 这 是 创建 外 部 <aiv> 语 句 的 接续 一 一 我 们 不 是 一 直 在 告诉 你 jQuery 链 很 强大 嘛 。 

在 这 个 代码 片段 中 , 我 们 创建 并 追加 内 部 <div>@，, 发 起 一 个 Ajax 请 求 来 获取 并 插入 术语 的 
定义 @。 因 为 我 们 使 用 的 是 10ad () 并 且 想 要 强制 发 起 GET 请 求 ， 所 以 需要 把 参数 信息 作为 文本 
字符 串 来 提供 。 在 这 里 不 能 依赖 serialize() ， 因 为 我 们 没有 处 理 任何 表单 控件 ， 因 此 使 用 
JavaScript 的 encodeURIComponent () 方 法 来 自 己 格式 化 查询 字符 串 合 。 

在 请 求 的 完成 回调 中 ， 我 们 找到 父 元 素 ( 通过 类 termifier 来 标记 ) 并 把 它 淡 入 视野 @。 

在 庆祝 之 前 ， 还 需要 执行 最 后 一 个 动作 才能 宣告 插件 完成 。 我 们 必须 给 包装 元 素 添 加 类 名 
termified， 以 便 为 页 面 开发 者 提供 一 种 改变 termified 元 系 样式 的 方式 。 

this.addClass('termified').; 

你 瞧 ! 现在 我 们 已 经 大 功 告 成 并 且 可 以 至 受 可 口 的 饮料 了 。 

全 部 的 插件 代码 如 代码 清单 8-7 所 示 ， 也 可 以 从 文件 chapter8/jquery.jqia.termifierjs 中 找到 。 
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代码 清单 8-7 ”Termifier 插件 的 完整 实现 


(function(s$s)t 


Ss.fn.termifier = function(actionURL,options) { 
Var settings = $.extendl(t 
origin: {top:0,1left:0}, 
ParamName: 'term', 


addClass: null, 
actionURL: actionURL 
} .options| |{}); 
this.click (function (event)t 
Ss('div.termifier') .remove(); 
Ss('<div>') 
.addClass ('termifier' + 
(settings.addClass ? (' ') + settings.addClass : '')) 
.CSS({ 
position: 'absolute', 
top: event.pageY - settings.origin.top, 
left: event.pageX - settings.origin.left, 
display: 'none,'! 
}) 
.Click (function(event)t 
$ (this) .fadeOut('slow'); 
}) 
.appendTo('body') 
.abpend ( 
Ss('<div>').1load!( 
settings.actionURL, 
encodeURIComponent (settings.paramName) + '=' 
encodeURIComponent ($ (event.target) .text()), 
function()t 
s(this).closest('.termifier').fadeIin('slow'),; 


十 


} 


) 
}); 
this.addClass('termified').; 


return this; 


jis 
(Iery 
这 是 较为 困难 的 部 分 。 容易 的 部 分 应 该 是 在 The Boot Closet 页面 应 用 Termifier 
够 正确 使 用 Termifier 插件 。 下 面 来 看 看 如 何 使 用 Termifier 插件 。 








至 少 要 能 





8.5.2 ”测试 Termifier 插 件 


因为 我 们 将 所 有 创建 和 操作 Termifier 提示 框 的 复杂 逻辑 封装 进 了 termifier () 方 法 ， 所 以 
在 The Boot Closet 页 面 使 用 这 个 新 的 jQuery 方法 相对 简单。 但 是 首先 需要 做 一 些 有 趣 的 诀 宋 。 

例如 ,我 们 需要 决定 如 何 找 出 页 面 上 和 硕 望 添加 提示 框 的 术语 。 记 住 ,我 们 需要 构造 一 个 元 对 
包装 集 ， 其 中 包含 了 方法 将 要 操作 的 术语 元 素 。 可 以 使 用 拥有 特定 类 名 的 <span> 元 素 ， 代 码 可 
能 如 下 所 示 : 
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wa HLS orm yo ea Welle 
在 这 种 情况 下 ， 创 建 这 些 元 素 的 包装 集会 非常 简单 : $ ('span.term')。 
但 是 有 人 可 能 会 党 得 <span> 标 签 有 点 宛 长 。 我 们 将 使 用 很 少 用 到 的 HTML 标签 <abbr> 来 取 
而 代 它 。<abbr> 是 HTML 4 添加 的 标签 ， 用 来 找 出 文档 中 的 缩写 。 因 为 这 个 标签 纯粹 是 为 了 找 
出 文档 元 素 , 没有 哪个 浏览 器 会 在 语义 或 者 视觉 呈现 方面 对 这 些 标签 做 过 多 的 处 理 , 所 以 特别 适 
合 我 们 使 用 。 




















注意 HTML4*DDDD0D00000000<cite>d<dfn>] 0 <acronym>] HIMLSDDD 
0 0000000000000000000000000000000000000 
[| DDUUUD<section>[| <article>|| [| <aside>|| 





因此 , 我 们 要 做 的 第 一 件 事 情 是 修改 服务 硕 端 资源 , 使 其 返回 包含 术语 的 商品 细 方 ， 以 便 将 
拥有 术语 表 定 义 的 那些 术语 放置 在 <abbr> 标 签 中 。 事实 证 明 , fetchProductDetails 动作 已 
经 那样 做 了 了。 由 于 浏览 带 不 会 对 <abbr> 标 签 做 任何 处 理 ， 因 此 除非 查看 动作 文件 或 者 检查 动作 
的 啊 应 ， 否 则 你 可 能 不 会 注意 到 这 个 标签 。 一 个 典型 的 啊 应 ( 球 式 7141922 ) 包含 以 下 内 容 : 

<div> 

<label>Features:</label> <abbr>Full-grain</abbr> leather uppers. Leather 


lining. <abbr>Vibram</abbr> sole. <abbr>Goodyear welt</abbr>. 
</div> 


注意 ， 如 何 使 用 <abbr> 标 签 将 术语 Full-grain、Vibram 以 及 Goodyear welt 识别 出 来 的 。 

现在 回 到 页 面 本 里, 把 第 三 阶段 的 代码 ( 代码 清单 8-6 ) 作 为 起 始点 ,来 看 下 为 了 使 用 Termifier 
需要 回 页面 添 加 什么 。 我 们 需要 把 新 方法 引入 页 面 ， 因 此 把 下 面 语 句 添 加 到 <headq> 世 中 (在 加 
载 jQuery 之 后 ): 

<script type="text/javascript" src="jquery.Jdqia.termifier.js"></script> 

当 加 载 商 品 信 息 时 ， 需 要 对 添加 到 页 面 的 任何 <abbr> 标 签 应 用 termifier() 方 法 ， 因 此 我 
们 为 获取 产品 详细 信息 的 1oada () 方 法 添加 了 一 个 回调 另 数 。 这 个 回调 函数 使 用 Termifier 来 设置 
所 有 的 <abpbr> 元 素 。 改 进 后 的 10ad() 方 法 (改变 部 分 用 粗 体 显 示 ) 如 下 所 示 : 


$('#productDetailPane') .1oad( 
/jdia2/action/ftetchProdquctDetailLs ' ， 
Sst"HbootChooserControl SET 上， 
function(){ S$S(':abbr') .termifier('/jqia2/action/fetchTerm'); } 




















3 
添加 的 回调 函数 创建 了 由 所 有 <abbr> 元 取 组 成 的 包装 集 并 癌 它 们 应 用 termifier () 方 法 ， 
指定 了 一 个 服务 器 端 动作 fetchTerm 并 且 让 所 有 其 他 的 选项 保持 默认 值 。 

这 就 是 全 部 内 容 了 !【〈 好 吧 ， 差 不 多 是 了 。) 





Q@ HTML 4.01 规范 : http://www.w3.org/TR/html4/。 一 一 编者 注 
@) HTML 5 规范 草案 : http://www.w3.org/html/wg/html5/。 一 一 编者 注 
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1. 清除 无 用 的 东西 

因为 我 们 很 明智 地 把 所 有 繁重 的 工作 封装 在 可 重用 的 jQuery 插件 中 ， 所 以 在 页 面 上 使 用 这 
个 插件 轻而易举 ! 我 们 也 可 以 轻松 地 在 其 他 任何 页 面 或 者 站 点 上 使 用 这 个 插件 。 这 才 是 工程 的 精 
髓 所 在 ! 

但 是 我 们 遗漏 了 一 件 小 事情 。 我 们 把 显示 男 一 个 Termifier 提示 框 时 删除 所 有 其 他 提示 框 的 
操作 封装 在 插件 内 部 ， 如 果 用 户 选 择 了 一 个 新 的 鞭子 款式 , 会 发 生 什 么 呢 ? 哎 呀 ! 页 面 上 将 会 留 
有 一 个 无 关 的 Termifier 面板 。 因 此 当 重 新 加 载 产 品 详细 信息 时 ， 需 要 删除 任何 已 经 显示 的 
Termifier 面板 。 

可 以 只 添加 一 些 代码 到 1oad() 回 调 王 数 ， 但 这 种 方式 似乎 是 错误 的 ， 因 为 它 会 将 Termifier 
和 产品 详细 信息 的 加 载 厢 合 在 一 起 。 如 果 能 够 保持 这 两 者 解 厢 合 , 而 且 只 需 监 听 那 些 通 知 什么 时 
候 可 以 删除 任何 Termifier 的 事件 ， 那 么 我 们 会 更 加 高 兴 。 

如 果 想 到 ajaxComplete 事件 ,可 以 吃 一 盒 机 糖 核桃 冰激凌 或 者 其 他 喜欢 的 食物 奖励 一 下 自 
己 。 可 以 监听 ajaxcomplete 事件 , 当 此 事件 是 和 fetchProductDetails 动作 绑 定 时 删除 任何 
现 有 的 Termifier: 

s(,body') .ajaxComplete (function (event, xhr,options) { 

if (options.url.indexOf ('fetchproductDetails') !1= -1) { 
s('div.termifier') .remove(); 

} 

}); 


现在 来 看 下 如 何 应 用 各 种 样式 到 Termifier 提示 框 。 

2. 为 提示 框 应 用 样式 

为 元 系 应 用 样式 是 件 相 当 简 单 的 事情 。 在 样式 表 中 我 们 可 以 轻松 地 应 用 规则 从 而 使 应 用 
termifier 插件 后 的 ) 术语 以 及 Termifier 面板 就 像 图 8-9b 所 示 的 那样 。 查 看 bootcloset .css， 
可 以 看 到 以 下 代码 : 


abbr.termified { 
text-decoration: underline; 


























COlor: aqdqua,; 
CuUursor: pointer,; 


} 


div.termifier { 
background-color: cornsilk; 
width: 256px; 
Color: brown; 
Padding: 8px; 
font-size: 0.8em; 


} 

这 些 规则 给 予 了 术语 类 似 链接 的 外 观 从 而 吸引 用 户 来 单 击 术语 ,并且 还 给 予 了 Termifier 提示 
框 如 图 8-9b 所 示 的 简单 外 观 。 页 面 的 这 个 版 本 可 以 在 http://localhost[:8080]/jqgia2/chapter8/bootcloset/ 
phase.4a.html 上 找到 。 

将 Termifier 面板 带 入 下 一 个 层级 ， 如 图 8-9c 所 示 ， 就 要 灵活 使 用 插件 中 提供 的 一 些 选项 。 
对 于 更 加 时 尚 的 版 本 ， 可 以 通过 下 面 的 代码 来 调用 Termifier 插件 〈 在 1oad() 回调 函数 中 ): 
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$('#productDetailPane').loadl( 
'/jqia2/action/fetchProductDetails', 
$('#bootChooserControl') .serialize(), 
function(){ $('abbr') 
.termifier( 
'/jqia2/action/fetchTerm', 
{ 
addClass: '‘'fancy', 
origin: {top: 28, left: 2} 
} 
); 
} 
)} 


这 个 调用 和 前 一 个 示例 的 不 同 之 处 仅 在 指定 了 要 添加 到 Termifier 的 类 名 fancy， 调 整 了 提 
示 框 的 原点 以 便 使 气泡 的 尖端 出 现在 鼠标 事件 的 位 置 。 
回 样 式 表 添 加 如 下 规则 〈 同时 保持 原 有 的 规则 不 变 ): 


div.termifier.fancy { 





background: url('images/termifier.bubble.png') no-repeat transparent; 
width: 256px; 
height: 104px; 

} 


div.termifier.fancy div { 
height: 86px; 
width: 208px; 
overflow: auto; 
Color: black; 
margin-left: 24px; 

} 


这 会 添加 如 图 8-9c 所 示 的 所 有 时 尚 的 样式 。 
这 个 新 页 面 可 以 在 http://localhost[:8080]/jgia2/chapter8/bootcloset/phase.4b.html 上 上 找到。 新 插 
件 不 仅 有 用 而 且 强 大 ， 不 过 总 是 有 提高 的 余地 。 





8.5.3 改进 Termifier 








新 出 炉 的 jQuery 插件 虽然 相当 好 用 ,但 是 还 有 一 些小 问题 和 可 以 进行 大 幅度 改进 的 潜力 。 
为 了 磨 练 你 的 技能 ， 下 面 的 列表 列 出 了 可 以 对 termifier() 方 法 或 者 The Boot Closet 页 面 做 的 
改进 。 
口 添加 一 个 选项 〈 或 者 耕 干 选项 ) 来 允许 页 面 开 发 者 控制 消退 效果 的 持续 时 间 ， 或 者 允许 
他 使 用 另 一 种 特效 。 
口 在 客户 单 击 Termifier 提示 框 、 显 示 男 一 个 提示 框 或 者 重新 加 载 产 品 详细 信息 页 面 之 前 ， 
Termifier 提示 框 会 一 直 显 示 。 为 Termifier 插件 添加 一 个 超时 选项 ， 以 便 在 超时 时 间 过 期 
后 上 自动 使 提示 框 消失 ( 如 有 果 提 示 框 仍然 处 于 显示 状态 )。 
口 单 击 提 示 框 来 关闭 它 ， 这 个 操作 会 币 来 易 用 性 问题 ， 因 为 不 能 选择 提示 框 中 的 文本 来 前 
切 精 贴 。 修 改 插件 以 便 用 户 单 击 页 面 上 提示 框 之 外 的 任何 地 方 都 会 关闭 提示 框 。 
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口 我 们 没有 在 插件 中 做 任何 错误 处 理 。 如 何 改 进 代 人 码 来 优雅 地 处 理 无 效 的 调用 信息 或 者 服 
务 册 闯 的 错误 呢 ? 

口 我 们 使 用 部 分 透明 的 PNG 文件 来 在 图 片 中 实现 吸引 人 的 阴影 。 尽 管 大 部 分 浏览 希 能 很 好 
地 处 理 这 种 文件 格式 , 但 正 6 却 不 能 处 理 PNG 文件 并 且 会 为 其 显示 白色 的 背景 。 为 了 解 
决 这 个 问题 ， 我 们 也 可 以 为 图 片 提 供 没 有 阴影 的 GIF 格式。 尽管 对 正 6 的 支持 逐 淘 减 少 
(事实 上 ，Google 已 经 在 2010 年 3 月 1 日 放 径 了 对 下 6 的 文 持 )， 如 何 改进 页 面 以 便 检测 
出 何 时 使 用 正 6 从 而 替换 所 有 的 PNG 引用 为 相应 的 GIF 图 片 ? 

口 说 到 图 片 ， 每 种 靴子 款式 只 有 一 张 照片 而 已 ， 即 使 该 款式 有 多 种 颜色 可 供 选 择 。 假 设 每 
个 可 能 的 颜色 都 有 相应 的 上 照片， 如何 改 进 页 面 以 便 在 颜色 改变 时 显示 对 应 的 图 片 呢 ? 

你 还 能 想 出 可 以 对 这 个 页 面 或 者 termifier () 插 件 做 的 其 他 改进 吗 ? 请 在 本 书 的 论坛 分 享 

你 的 想法 以 及 解决 方案 ， 论 坛 的 网 址 是 : http://www.manning.com/bibeault2。 


























8.6 小结 


毫 不 奇怪 ， 这 是 本 书 中 最 长 的 一 章 。Ajax 是 新 一 波 DOM 脚本 应 用 程序 的 关键 部 分 ，jQuery 
也 非常 乐意 提供 一 组 丰富 的 工具 集 供 我 们 使 用 。 

对 于 加 载 HTML 内 容 到 DOM 元 系 ，load () 方 法 提供 了 一 种 侧 单 的 方式 来 从 服务 融 获 取 内 
容 并 使 之 成 为 任意 包装 集 元 素 的 内 容 。 使 用 GET 还 是 使 用 Posz 方法 取决 于 如 何 提供 传递 到 服务 
售 的 参数 数据 。 

当 需 要 GET 方法 时 ，jQuery 提供 了 实用 函数 $.get () 和 $ .getJSON(); 如 打从 服务 大 返回 
JSON 数据 ， 那 后 者 会 很 有 用 。 为 了 强制 发 起 PoST 方法 ， 可 以 使 用 $ .post () 实 用 函数 。 

如 采 需 要 最 大 的 灵活 性 ， 那 么 可 以 使 用 市 有 丰 训 分 类 选项 的 $.ajax() 实 用 困 数 ， 它 人 允许 我 
们 控制 Ajax 请 求 的 大 部 分 细 方 。jQuery 中 所 有 其 他 的 Ajax 特征 都 使 用 这 个 函数 的 服务 来 提供 目 
己 的 功能 。 

为 了 使 得 管理 大 量 的 选项 不 那么 繁琐 ，jQuery 提供 了 $.ajaxSetup() 实 用 函数 ， 人 允许 为 
$ .ajax() 限 数 (包括 使 用 $ .ajax() 服 务 的 所 有 其 他 的 Ajax 函数 ) 的 任何 常用 选项 设置 默认 值 。 

为 了 完善 Ajax 工具 集 ,jQuery 也 允许 我 们 通过 在 各 个 阶段 触发 Ajax 事件 来 监听 Ajax 请 求 的 
过 程 ， 并 人 允许 建立 处 理 硕 来 监听 这 些 事件 。 我 们 可 以 对 这 些 处 理 融 使 用 bina() 方 法 ， 也 可 以 使 用 
以 下 便捷 方法 : ajaxStart() 、ajaxSend()、ajaxSuccess() 、ajaxError() 、 ajaxComplete () 
以 及 ajaxStop () 。 

在 掌握 了 这 些 令 人 印象 深刻 的 Ajax 工具 集 后 ,在 Web 应 用 程序 中 司 用 丰 宙 的 功能 会 很 容 多 。 
记 住 ， 如 果 有 的 东西 jQuery 没有 提供 ， 那 么 利用 jQuey 的 现 有 特征 来 扩展 jQuery 也 是 非 销 容易 
的 。 或 者 可 能 已 经 存在 这 样 一 个 插件 〈 官方 的 或 者 非 官 方 的 ) 正好 可 以 满足 你 的 需求 ! 
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JOQuery UI 





本 书 的 第 一 部 分 主要 介绍 jQuery 核心 库 ， 我 们 做 了 许多 工作 来 学 习 如 何 轻松 地 扩展 
jQuery。 这 人 么 做 是 正确 的 ， 因 为 扩展 卉 称 jQuery 的 最 大 特点 。 它 拥有 的 各 种 官方 插件 、 大 量 可 
用 的 非 官 方 插件 以 及 伴随 的 jQuery UI 库 无 疑 都 证 明了 这 点 。 

jQuery UI 是 建立 在 核心 库 功 能 基础 上 的 ， 为 创建 美观 大 方 、 一 目 了 然 的 用 户 界面 提供 了 大 
量 高 级 组 件 。 

我 们 将 从 学 习 如 何 获 取 和 配置 库 开 始 这 不 像 复 制 单个 文件 〈 就 像 对 核心 库 进 行 的 操作 
那样 ) 那样 简单 。 然 后 我 们 还 会 看 一 些 jQuery UI 回 核 心 库 特 征 中 添加 的 基础 功能 。 

由 此 我 们 将 看 到 jQuery UI 是 如 何在 核心 库 之 上 搭建 一 层 新 框架 的 ， 还 会 看 到 这 层 框 架 添加 
的 扩展 功能 , 这 些 功能 给 我 们 市 来 了 用 户 界 面 交 互 , 从 而 可 以 拖 放 元 系 、 排 序 元 系 以 及 缩放 元 又。 
不 仅 如 此 ，jQuery UI 叉 以 这 层 框 架 为 基础 ， 为 我 们 提供 了 一 些 用 户 界 面部 件 (widget )。 我 们 也 
将 详细 人 研究 这 些 部 件 。 

完成 了 这 个 部 分 , 也 就 是 完成 了 对 本 书 的 学 习 之 后 ,你 就 能 去 完成 任何 Web 用 户 界 面 项 目 。 
J ne J 
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本 章 内 容 

口 jQuery UI 概述 

口 配置 和 下 载 jQuery UI 库 

口 获取 和 创建 jQuery UI 主题 
口 扩展 jQuery UI 提供 的 特效 
口 其 他 对 核心 库 的 扩展 


jQuery UI 不 只 是 一 个 插件 , 但 却 不 属于 jQuery 核心 库 , 它 是 jQuery 核心 库 的 一 个 官方 扩展 ， 
旨 在 为 局 用 jQuery 的 Web 应 用 页 面 提供 扩展 用 户 界 面 (UI ) 的 能 

基于 浏览 妖 环 境 中 使 用 的 工具 (如 JavaScript、DOM 操作 、HTML， 其 至 是 核心 jQuery 库 ) 
给 予 了 我 们 一 些 基本 能 力 ， 几 乎 可 以 将 所 有 想 要 提供 给 用 户 的 任意 类 型 的 交互 组 件 组 猴 在 一 起 。 
但 即便 如 此 ， 使 用 基本 构造 块 来 创建 复杂 的 交互 仍然 令 人 生 旦 。 用 来 进行 DOM 操作 的 原生 
JavaScriptAPI 极 度 乏 味 ( 笠 运 的 是 我 们 有 核心 jQuery 库 来 对 付 它 )， 而 且 与 桌面 应 用 程序 相 比 ， 
HTML 提供 的 几 个 表单 控件 也 实在 太 少 了 。 

我 们 可 以 使 用 目前 为 止 学 到 的 jQuery 方法 来 创建 自己 的 交互 组 件 和 控件 ( 也 称 为 部 件 )。 但 
是 jQuery UI 库 提 供 了 许多 万 众 期 待 的 扩展 特征 。jQuery UI 提供 了 一 些 高 级 组 件 ， 来 帮助 创建 这 
些 交 互 组 件 和 控件 。 

设想 一 个 常用 的 部 件 例 如 进度 条 。 我 们 可 以 分 析 其 需求 ， 然 后 想 想 如 何 使 用 核心 jQuery 来 
实现 它 ， 不 过 UI 库 已 经 预料 到 了 这 个 需求 并 且 提 供 了 一 个 现成 的 进度 条 部 件 。 

与 jQuery 核心 库 不 同 ，jQuery UI 是 松散 看 合 元 素 的 联合 体 。 我 们 将 会 在 9.1 市 看 到 ， 如 何 
下 载 一 个 包含 所 有 元 素 的 库 ， 或 者 下 载 仪 仪 包含 需要 的 元 素 的 库 。 这 些 元 素 大 体 分 为 以 下 3 类。 

口 特效 类 一 一 除了 jQuery 核心 库 提 供 的 特效 之 外 的 增强 特效 。 

口 交互 类 一 一 自 标 交互 ， 比 如 拖 放 元 系 、 排 序 元 条 等 。 

口 部 件 类 一 一 一 组 常用 的 控件 ， 比 如 进度 条 、 滑 动 条 、 对 话 框 、 选 项 卡 等 。 

值得 注意 的 是 ， 交 互 组 件 和 UI 部 件 使 用 了 大 量 的 CSS 来 “布置 ”可 见 元 素 。 这 是 使 元 素 正 
确 工 作 的 基本 工具 ， 也 使 其 符合 页 面 的 设计 和 外 观 ， 本 和 曹 稍 后 将 会 专门 探讨 这 个 话题 。 

jQuery 的 内 容 很 多 。 因 为 jQuery UI 是 jQuery 的 一 个 重要 扩展 ， 所 以 我 们 用 3 章 的 篇 幅 来 探 
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讨 它 。 我 们 也 提供 了 一 组 UI 实验 室 页 面 一 一 每 个 页 面 儿 乎 都 对 应 着 jQuery UI 的 一 个 主要 领域 。 
这 几 章 的 内 容 连 同 实 验 室 页 面 ， 应 能 帮助 你 轻松 走 进 jQuery UI 的 世界 。 
内 话 少 说 ， 下面 就 开始 着 手 学 习 jQuery UI 吧 。 


9.1 配置 并 下 载 jQuery UI 库 


jQuery UI 库 由 很 多 元 系 组 成 。 根 据 应 用 程序 的 需求 ， 你 可 能 会 用 到 所 有 元 素 ， 也 可 能 只 使 用 
它们 的 一 个 子 集 。 例 如 ， 你 的 应 用 程序 可 能 不 需要 使 用 部 件 ， 但 是 它 可 能 需要 拖 放 元 每 的 功能 。 

jQuery UI 团队 提供 了 构建 库 文件 的 功能 ， 这 个 库 文件 可 以 仅 由 基本 部 件 组 成 ， 也 可 以 加 上 
你 想 要 为 应 用 程序 添加 的 任何 功能 。 这 就 避免 了 加 载 一 个 规模 庞大 ， 还 包含 很 多 多 余 功能 的 库 。 
毕 范 ,为 什么 要 在 所 有 页 面 上 加 载 一 大 堆 无 用 的 脚本 呢 ? 


9.1.1 配置 和 下 载 库 


在 使 用 jQuery UI 库 之 前 ， 我 们 需要 下 载 它 。jQuery UI 的 下 载 页 面 在 http:/jqueryui.comy 
download， 如 图 9-1 所 示 。 从 图 中 可 以 看 到 ， 编写 此 书 时 jQuery UI 的 最 近 版 本 是 1.8。 
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和 CO 省 家 hip/1jqueryuicomjdownload bp Dr £- 
a 。 四 


Downicad Demos & Documentation Themes Development Support 


Build Your Download 


Customize your jQuery Ul download by selecting the version and specific modules YOU 
need in the form below or select a quick download package. A range of current and 
historical jQuery Ul releases are also hosted on Googles CDN. 


Qutck downloads: Latest (t.8: for jQuery 1.4+) | Stable (1.7.2: for Query 1.3*) 


mponents (30 of 30 selected) 
Seiect the thome YOU want to 
include or design a custom theme 


Ul Core Wi core The core of jQuery Ul, required for all interactions and Ut lightness "9 
Areoquylired deperndency, > 


ee Fas functions and Vv Widget The widget factory, base for all widects 
nitisltzers. 





» Advanced Theme Settings 


MV Mouse The OU widget 3 base chss for all Nteractions and 
wideets with heavy mouse interaction. 


Bf position A utility plugin for positioning clements relative to other 
elernent5. 


@ Deselect al 
Interactions 以 Draggable Makes Sny clement on the pege dragesble. 
These add basic behaviors to 
any element and are used 区 Droppable Generated drop tarsets for drageabdble elements. 
y malyy components below 
. i Bi Resizable Makes any element on the page resizable, 


™ Selectable Makes 3 list of clements mouse electable by dragging 3 
box or clicking on them. 

















图 9-1 jQuery UI 下 载 页 面 允许 我 们 配置 和 下 载 一 个 根据 应 用 程序 需求 来 定义 的 jQuery UI 库 
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在 下 载 页 面 上 ， 你 会 看 到 jQuery UI 可 用 的 组 件 列 表 ， 勾 选 组 件 对 应 的 复 选 框 就 可 以 选择 该 
组 件 。 你 最 好 勾 选 UI Core 的 复 选 枉 ， 因 为 所 有 交互 组 件 和 大 部 分 部 件 都 会 用 到 它 。 但 是 不 要 为 
选择 哪些 选项 过 度 纠 结 ， 这 个 页 面 会 目 动 选择 从 属 组 件 ， 并 且 不 会 让 你 将 无 效 的 组 件 放 在 一 起 。 

选 好 组 件 后 〈 目前 ， 我 们 建议 你 出 于 学 习 的 目的 选择 所 有 组 件 )， 可 从 最 右 侧 一 栏 的 下 拉 列 
表 中 选择 一 个 主题 ， 然 后 单 击 Download 按钮 。 

目前 来 说 选择 哪个 主题 并 不 重要 ， 稍 后 我 们 将 在 本 章 中 阐述 CSS 主题 。 现 在 ， 请 任意 选择 
主题 , 但 目前 不 要 选择 No Theme (无 主题 ) 选项 。 你 肯定 想 要 下 载 CSS 主题 而 不 是 从 头 创 建 它 。 
相信 我 一 一 你 随时 可 以 蔡 换 或 者 调整 CSS 主题 。 


























注意 0000000000000 JavascriptDO00000000000000000000 
UDUDOUUUUUUD 





本 书 示 例 代码 所 提供 的 jQuery UI 库 配置 包含 了 所 有 组 件 并 且 使 用 了 Cupertino 主题 。 
9.1.2 ”使 用 jQuery UI 库 


单 击 Download 按钮 ,一 组 压缩 的 目 定义 jQuery UI 库 文件 就 会 被 下 载 到 你 的 系统 中 (下 载 到 
哪里 取决 于 浏览 器 设置 ) 。 压 缩 文 件 包 含 如 下 文件 和 文件 夹 。 
D index.html 一 一 HTML 文件 , 包含 所 下 载 的 部 件 示 例 , 这 些 部 件 是 通过 选中 的 主题 演 染 的 。 
你 可 以 使 用 该 页 面 快 速 检查 以 确定 是 否 包 含 了 全 部 想 要 的 部 件 ， 以 及 主题 是 否 和 你 想象 
的 完全 一 致 。 
口 css 一 一 文件 夹 ， 其 下 的 子 文件 夹 包含 选中 主题 的 CSS 文件 和 图 片 。 子 文件 夹 以 选中 主题 
命名 ， 例 如 cupertino 或 者 trontastic。 
口 development-bundle 一 一 包含 开发 者 资源 的 文件 夹 ， 比 如 许可 文件 、 示 例 、 文 档 以 及 其 他 
有 用 的 文件 。 在 你 空闲 的 时 候 多 玖 悉 下 这 个 文件 夹 ， 其 中 有 很 多 好 东西 。 
口 js 文件 来， 包含 生成 的 jQuery UI 的 JavaScript 代码 ， 以 及 一 个 核心 jQuery 库 的 
副本 。 
要 使 用 这 个 库 ， 你 需要 将 CSS 文件 夹 里 的 主题 文件 夹 、js 文件 夹 里 的 jQuery UI 库 文件 
jquery-ui-1.8.custom.min.js 复制 到 Web 应 用 程序 里 的 相应 位 置 。 如 果 尚 未 包含 核心 库 ， 那 还 需要 
复制 jQuery 核心 库 。 









































注意 JavaScriptD D0000000 jQueryUvI0000000000000 jQuery UID DO 
UU0DD 











尽管 可 以 根据 Web 应 用 程序 的 需求 来 指定 放置 这 些 文件 的 位 置 ， 但 是 保持 主题 的 CSS 文件 
与 其 图 片 的 关联 是 很 重要 的 。 除 非 你 想 要 改变 CSS 文件 里 的 所 有 图 片 的 引用 ， 和 否则 务必 确保 主 
题 图 片 和 CSS 文件 是 放置 在 同一 个 文件 夹 中 的 。 




















图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 


9.2 jQuery 的 主题 和 样式 259 











文 持 多 个 主题 的 并 用 应 用 程序 布局 如 图 9-2 所 示 。 在 这 里 ， 我 们 文 持 三 套 打 包 好 的 可 供 下 载 
的 主题 。 


Name 二 Size Kind 
™ BB web-app-root -- Folder 
3) index.html 4KB HTML document 
v Ba scripts -- Folder 
本 jquery-1.4.2.min.js 74 KB JavaScript file 
砚 jquery-ui-1.8.custom.min.js 184 KB JavaScript file 
Y BB themes 一 - Folder 
Y BB black-tie -- Folder 
> 9 images ~— Folder 
问 | jquery-ui-1.8.custom.css 29 KB Cascading Style Sheet file 
™ BB cupertino 一 Folder 
国 images -- Folder 
jquery-ui-1.8.custom.css 33 KB Cascading Style Sheet file 
7 OD trontastic -- Folder 
» (9 images -- Folder 
问 jquery-ui-1.8.custom.css 29 KB Cascading Style Sheet file 








图 9-2 使 用 jQuery UI 的 应 用 程序 其 脚本 和 主题 文件 的 和 常用 布局 ( 该 布局 可 能 因 人 而 异 ) 











切换 主题 非常 轻松 ， 只 需要 改变 应 用 程序 页 面 中 引用 CSS 文件 的 URL 即 可 。 
文件 就 位 之 后 ， 就 可 以 使 用 <1ink> 和 <script> 标 签 将 它们 导入 到 页 面 上 。 例 如 ， 可 以 使 用 
如 下 标记 将 文件 导入 到 index.html 文件 ， 以 实现 图 9-2 所 描述 的 应 用 程序 布局 : 
<link rel="stylesheet" type="text/css" 
href="themes/black-tie/jquery-ui-1.8.custom.css"> 
<script type="text/javascript" src="scripts/jquery-1.4.2.min.jJjs"></script> 


<script type="text/jJavascript" 
src="scripts/jquery-ui-1.8.custom.min.js"></script> 


切换 主题 可 以 通过 改变 <1ink> 标 签 里 的 主题 名 称 来 实现 。 





i 


注意 DDO00000000000000000000 http://jqueryvi.com/docs/Theming/ 
ThemeSwitcher [| [| Theme Switcher Widget|| 








有 了 这 些 知 识 在 和 于， 我 们 就 具备 了 探索 jQuery UI 的 能 力 。 在 本 章 的 后 续 几 节 中 ， 我 们 将 会 
从 仔细 研究 主题 开始 ， 然 后 看 看 jQuery UI 扩 展 核心 库 的 方法 和 功能 ， 尤 其 是 在 特效 领域 。 在 第 
10 草 和 第 11 章 ， 我 们 将 会 首 匈 控 索 鼠标 交互 然后 再 研 完 部 件 。 


9.2 jQuery 的 主题 和 样式 


jQuery UI ( 特别 是 部 件 集 ) 高 度 依赖 于 下 载 的 CSS 文件 里 定义 的 CSS 类， 这 个 CSS 文件 是 
用 来 设置 页 面 上 可 见 元 素 的 样式 。 我 们 将 会 在 本 章 以 及 接 下 来 的 两 章 中 学 到 ，jQuery UI 对 赋 给 
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元 系 的 类 名 的 依赖 ， 要 比 对 样式 的 依赖 要 多 得 多 。 

设置 jQuery UI 所 用 主题 有 很 多 方式 。 这 里 列 出 了 这 些 方式 ， 由 兄 到 难 。 

口 在 下 载 过 程 中 选择 一 个 主题 ， 并 原封 不 动 地 使 用 它 。 

口 使 用 ThemeRoller Web 应 用 程序 来 设计 目 己 的 主题 。 我 们 将 在 9.2.2 市 中 快速 介绍 ThemeRoller 

的 用 法 。 

口 通过 修改 原始 的 CSS 文件 ， 或 者 提供 一 个 CSS 文件 履 盖 原始 设置 来 调整 下 载 的 主题 。 

口 从 头 编写 上 月 己 的 主题 。 

不 推荐 采用 最 后 那 种 方式 。 这 需要 定义 的 大 量 的 类 (预定 义 主题 的 CSS 文件 有 450 ~ 500 行 
之 多 ), 一 旦 出 错 ， 后果 会 非常 严重 。 

下 面 就 从 如 何 组 织 预 定义 CSS 文件 和 类 名 来 开始 吧 。 




















9.2.1 概述 








尽管 预定 义 主题 看 起 来 很 美好 ,但 是 几乎 找 不 到 一 个 能 精确 匹配 Web 应 用 程序 的 主题 。 

当然 也 可 以 先 下 载 一 个 现成 的 主题 , 然后 将 其 作为 网 站 的 最 终 外 观 , 但 是 这 样 的 好 事 并 不 沼 
有 。 我 们 中 的 每 个 人 都 可 能 会 遇 到 这 种 情况 ,市场 经 理 或 者 产品 经 理 站 在 我 们 后 面 问 直 : “把 它 
贡 成 蓝 色 会 怎么 样 呢 ? “ 

下 一 六 将 要 讨论 的 ThemeRoller 可 以 帮助 构造 一 个 主题 ， 使 其 满足 我 们 需要 的 颜色 和 外 观 ， 
但 即便 如 此 ， 我 们 可 能 仍然 需要 逐 页 调整 。 因 此 ， 了 解 jQuery UI 是 如 何 组 织 和 使 用 CSS 类 是 非 
各 必要 的 。 

下 面 从 考察 如 何 命 名 这 些 类 开始 。 

1. 类 的 命名 

jQuery 定义 和 使 用 的 类 名 非常 广泛 ,但 结构 清晰 合理 。 命 名 类 时 考虑 周到 ,因为 类 名 不 仅 传 
达 了 类 的 含义 ,而 且 还 说 明了 在 哪里 和 如 何 使 用 类 的 信息 。 尽 管 名 称 很 多 , 但 是 如 果 你 掌握 了 类 
名 构建 的 徊 门 ， 就 会 发 现 其 中 的 逻辑 ， 从 而 轻松 地 管理 它们 。 

首先 ， 为 了 防止 在 类 的 命名 空间 里 使 用 其 他 人 的 命名 ， 所 有 的 jQuery UI 类 名 都 是 以 ui- 作 
为 前 级 。 类 的 名 称 都 是 小 写 的 ， 并 使 用 连 字 符 ( - ) 来 分 隅 单词 ， 例 如 : ui-state-active。 

在 jQuery 库 中 ， 有 些 类 随处 可 见 。 前 面 提 及 的 类 ui-state-active 底 是 一 个 很 好 的 例子 。 
所 有 UI 库 的 组 件 都 使 用 它 来 指示 一 个 元 素 处 于 激活 状态 。 例 如 ，Tab 部 件 用 它 来 标记 当前 选中 
的 选项 卡 ， 而 Accordion 部 件 用 其 来 找 出 打开 的 可 折 车 面板 。 

有 些 类 是 某 些 组 件 ( 如 交互 元 素 和 UI 部 件 ) 所 特有 的 。 这 时 ， 组 件 名 称 会 下 接 出 现在 ui 
前 级 之 后 。 例如 ， 属于 Autocomplete 部 件 的 类 都 会 以 ui-autocomplete 开头 ， 而 属于 Resizable 
交互 部 件 的 类 都 会 以 ui-resizable 作为 开头 。 

在 本 世 的 剩余 部 分 , 我 们 将 会 仔细 考察 可 用 于 多 个 库 的 类 的 分 组 。 在 接 下 来 的 儿童 中 对 各 种 
组 件 进行 考察 时 ， 我 们 将 会 讨论 那些 组 件 所 特有 的 类 。 我 们 不 可 能 讨论 所 有 jQuery UI 定义 类 而 
是 会 探讨 最 重要 的 、 可 能 需要 在 页 面 上 使 用 的 类 。 
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2. 识别 部 件 

用 jQuery UI 库 来 创建 部 件 时 ， 构 成 部 件 的 元 素 可 以 由 jQuery 库 来 创建 ， 也 可 以 由 已 经 存在 
于 页 面 上 的 现 有 元 系 来 创建 。 

jQuery UI 使 用 一 组 以 ui-widget 开头 的 类 名 来 标识 构成 部 件 的 元 素 。 类 ui-widget 用 来 
标识 部 件 的 主 元 素 一 一 通 当 是 一 个 容 人 各， 它 是 构成 部 件 的 所 有 元 系 的 父 元 又 。 

其 他 类 和 名， 例如 ui-widget-header 和 ui-widget-content 则 酌情 由 部 件 的 相应 元 系 使 
用 。 各 个 部 件 使 用 这 些 类 的 方式 可 能 不 尽 相 同 。 

3. 状态 跟踪 

在 不 同 的 时 间 点 ， 部 件 或 交互 元 素 的 各 个 部 分 可 能 处 于 不 同 的 状态 。jQuery UI 通过 一 组 以 
ui-state 开头 的 类 来 跟踪 这 些 状态 ， 并 为 其 应 用 合适 的 视觉 样式 。 这 些 状态 包括 ui-state- 


default、 ui-state-active、 ui-state-focus、 ui-state-highlight、 ui-state-error.、 





























ui=gtate=digeBled LR ui=etate lovero 

我 们 可 以 在 自己 的 脚本 或 CSS 文件 里 使 用 上 述 名 称 来 跟踪 状态 或 改变 各 种 状态 下 的 元 素 
件 了 ls 

4. 图 标 

jQuery UI 定义 了 大 量 的 图 标 可 供 各 种 部 件 使 用 。 例 如 ， 在 Tab 部 件 的 选项 卡 元 素 上 用 图 标 
指示 状态 ， 或 者 耳 接 在 Button 部 件 上 放置 的 图 标 。 每 个 图 标 都 以 ui-icon 开头 的 类 名 来 标识 。 
例如 ，ui-icon-person、ui-icon-print 以 及 ui-icon-arrowthick-1-swo 

jQuery UI 处 理 图 标的 方式 非常 智能 。 每 个 图 标 都 被 定义 在 一 张 单个 图 片 的 网 格 上 ， 称 为 图 
标注 ( 如 果 你 也 同音 这 种 称呼 的 话 ) 。 这 样 一 来 ， 只 要 浏 宽 带 下 载 并 绥 存 这 张 图 片 ， 就 不 需要 青 
访问 服务 融 来 显示 任何 可 用 的 图 标 了 一 一 这 些 图 标 数 量 众多 〈 写作 此 书 时 已 有 173 个 网 标 ) 。 秆 
义 图 标 类 的 目的 是 将 这 个 原始 的 图 标 短 作为 背景 图 片 来 移动 , 从 而 使 得 所 需 的 图 标 显 示 在 元 素 的 


4b _ 司 . 
月 乐 |o 


我 们 将 会 在 第 11 章 更 详细 地 探讨 图 标 以 及 Button 部 件 ， 但 是 如 果 你 想 先 有 睹 为 快 ， 可 以 在 浏 
览 亏 中 打开 文件 chapterl11/buttons/ui-button-icons.html。 

5. 圆 角 

如 果 已 经 看 过 jQuery UI 定 义 的 部 件 ， 那 么 你 可 能 已 经 见 过 很 多 圆 角 效 宁 。 

jQuery UI 使 用 了 一 组 类 , 它们 定义 了 适合 特定 浏览 器 和 CSS3 的 样式 规则 ， 以 便 在 所 文 持 的 
浏览 硕 中 显示 圆 角 。 不 文 持 圆 角 的 浏览 硕 不 会 显示 圆 角 。 

这 些 圆 角 类 并 非 只 为 jQuery UI 部 件 而 设 。 我 们 可 以 在 页 面 的 任何 元 素 上 使 用 这 些 类 。 

用 浏览 妖 打 开 文 件 chapter9/lab.rounded-corners.html, 打开 迷你 圆 角 实验 室 页 面 (这 个 页 面 太 
简单 了 ， 称 不 上 一 个 完整 的 实验 室 页面 ) 。 你 将 会 看 到 如 图 9-3 所 示 的 页 面 。 
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HNO As 
Vy L] Rounded Corners Mini-Lab x Won 


-> 《2 会 二 http:/ /localhost/jgqia2 /chapter9 /lab,rounded-corners,html 3 口 > A- 














jQuery UI Rounded Corners Mini-Lab 


Dj ui-corner-tl LU ui-corner-top DD ui-corner-tr 
DD ui-corner-left Mi ui-corner-all DD ui-corner-right 
LU ui-corner-bl DU ui-corner-bottom [DD ui-corner-br 


The quick young cub 和 
jumped over the lazy 二 Sy 
bear. -和 

















图 9-3 ”迷你 圆 角 实验 室 回 我 们 展示 了 如 何 通 过 侧 单 的 类 赋值 来 将 圆 角 效果 
应 用 到 元 素 上 


总 复 选 框 控 件 允 许 我 们 选择 要 应 用 ui-corner 类 中 的 哪些 类 ( 如 果 有 的 话 ) 到 测试 对 象 上 。 
勾 选 一 个 复 选 枉 ， 就 会 对 其 应 用 相应 的 类 名 ; 取消 勾 选 ， 就 会 删除 该 类 名 。 


注意 U IE8D000000000000000000 IE900000000000 Firefox 
DUDOU0D00D0O0U0O0D0O0UU0UUUUUUUUD 


人 花 一 些 时 间 去 单 击 不 同 的 复 选 框 来 ， 看 看 类 的 应 用 是 如 何 改 变 测 试 对 象 的 各 个 抛 角 的 。 


9.2.2 使 用 ThemeRoller 工具 


如 果 在 下 载 jQuery UI 后 ， 你 快速 浏览 过 生成 的 CSS 文件 ， 可 能 很 快 就 会 得 出 一 个 结论 : 试 
图 从 头 编写 这 样 的 文件 简直 是 狗 狂 的 行为 。 看 一 眼 CSS 相应 的 图 片 就 能 证 明 这 一 点 。 

如 果 主 题 包 与 站 点 的 需求 不 匹配 ， 还 有 以 下 这 些 明 知 选 择 : 

口 选择 一 个 最 接近 需求 的 主题 包 ， 然 后 调整 到 所 喜欢 的 样子 ; 

口 使 用 ThemeRoller 工具 ， 从 头 创建 一 个 主题 。 

结果 证 明 ，ThemeRoller 工具 是 完成 上 述 任何 一 种 选择 的 最 好 方法 。 使 用 ThemeRoller 工具 ， 
我 们 可 以 利用 它 简 清 直观 的 界面 从 头 指定 主题 的 所 有 细 记 ,也 可 以 预 加 载 一 个 预定 义 的 主题 , 再 
将 其 调整 到 我 们 喜欢 的 样子 。 

ThemeRoller 工具 如 图 9-4 所 示 ， 可 以 从 http://jqueryui.com/themeroller/ 获 取 。 

我 们 不 会 过 多 介绍 使 用 ThemeRoller 的 细 市 ， 因 为 弄 明 白 这 些 细 市 相当 容易 。 但 还 是 有 一 些 
事情 ， 值 得 你 花 些 时 间 去 了 解 。 
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ANMA - 
jQuery UI - ThemeRoller x Wo 


所 他 @ 会 安 hitp:/ /jqueryui.com /themeroller 








Download Demos & Documentation Development Support 


nn Newl Bring ThemeRoller into any page: Get the ThemeRoller Firefox Bookxmarklel 





ThemeRoller ii) 
ge 
Accordion 


Button 
Roll Your OWn Gallery Heip 





Secbon 1 A button element 


Mauris mauris ante, blandit et, ultrices a, suscipit eget, OS 达 
quam. Integer ut neque. Vivamus nisi metus, molestie 
vel gravida in, condimentum sit amet, Nunc. Nam a 
nibh. Donec suscipit eros. Nam mi. Proln viverra leo ut Autocomplete 
bc odio, Curabitur malesuada. Vestibulum a velit eu ante 
Cr scelerisque vulputate. 


Boeckground color & texture 
#fcfctd EG 


Border icon 


| #o6c9e7 E22772 慰 007658 





Be sc | re | | 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
do eiusmod tempor incididunt ut labore et dolore magna 
sliqus. Ut enim sd minim veniam, quis nostrud exercitation 
ullamco laboris nlsi ut aliqulp ex ea commodo conseauat. 


Dialog 


Overlay and Shadow Classes 





Highiight / Error 
Lorem ipsum dolor sit amet. Nulla nec tortor. Donec id elit gquis purus 


图 9-4 jQuery UI 的 ThemeRoller 工具 使 用 简洁 直观 的 界面 来 创建 交互 式 自 定 义 主题 


1. ThemeRoller 的 基本 用 法 
界面 左边 的 ThemeRoller 控制 面板 有 三 个 选项 卡 ， 如 下 所 示 。 
口 Roll Your Own 一 一 我 们 将 在 这 里 完成 大 部 分 的 工作 。 各 种 各 样 的 面板 〈 单 击 一 个 面板 标 
题 即 可 打开 该 面板 ) 可 用 来 指定 主题 的 所 有 细 方 。 显 示 区 域 里 的 变化 实时 更 新 ， 以 便 展 
示 对 设置 的 更 改 是 如 何 影响 各 个 部 件 的 。 
口 Gallery 一 一 列 出 了 所 有 包含 的 主题 包 。 我 们 将 会 在 下 市 中 讨论 这 个 列表 。 9 
口 Help 一 一 当 你 遇 到 困难 时 可 参考 的 帮助 文本 。 
当 对 自己 的 主题 满意 的 时 候 ， 单 击 Roll Your Own 选项 卡 上 的 Download Theme 按钮 就 可 以 
转 到 Build Your Download 页 面 ， 这 样 就 可 以 下 载 日 定义 主题 了 。( 主题 的 设置 作为 请 求 的 参数 ， 
通过 URL 来 传递 。) 
我 们 在 9.1 节 介 绍 过 ， 单 击 Build Your Download 页 面 上 的 Download 按钮 可 以 下 载 主题 。 
2. 从 主题 包 开 始 
通常 来 说 ,与 完全 从 头 创建 一 个 自 定 义 主 题 相 比 , 一 个 现成 的 主题 包 可 能 更 容易 起 步 。 如 果 
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你 想 加 载 一 个 预定 义 主题 的 设置 ， 并 对 其 进行 调整 ， 请 遵循 以 下 这 些 简 单 的 步骤 。 

(1) 选择 Gallery 选项 卡 。 

(2) 仔细 了 解 预定 义 主题 ， 然 后 选择 你 想 要 开始 设置 的 主题 。 单 击 该 主题 ， 显 示 区 域 里 的 部 
件 将 会 展示 该 主题 的 设置 。 

(3) 返回 到 Roll Your Own 选项 卡 。 注 意 ， 预 定义 主题 的 设置 已 经 被 设 定 到 控件 里 了 。 

(4) 根据 你 目 己 的 意愿 调整 主题 的 设置 。 

(5) 主题 调整 完成 后 单 击 Download Theme 按钮 。 

下 载 的 CSS 文件 和 图 请 将 会 反映 出 你 为 目 定 义 主题 所 选择 的 设置 ， 在 下 载 的 内 容 中 ，CSS 
文件 夹 内 包含 该 主题 的 文件 夹 将 会 被 命名 为 custom-theme。 

3. 重新 加 载 主题 

当 你 正在 为 Web 应 用 程序 里 应 用 了 自 定 义 主题 而 自 鸣 得 意 时 ， 总 会 有 人 走 过 来 对 你 的 设置 
指 手 画 脚 。 虽 然 经 过 努力 尝试 ,但 是 你 在 ThemeRoller 上 却 找 不 到 上 传 控 件 或 者 重新 加 载 控 件 。 
为 了 修改 主题 ， 真 的 需要 每 次 都 重新 创建 一 个 上 自 定 义 主题 吗 ? 当然 不 需要 。 

在 下 载 的 CSS 文件 里 ( 大约 在 第 44 行 , 不 是 在 最 顶 问 ) ,你 将 会 找到 一 句 包 含 文本 “* To 
view and modify this theme visit” 的 注释 ， 后面 跟着 一 个 相当 长 的 URL。 把 这 个 URL 复制 粘贴 
到 浏览 器 地 址 栏 中 ， 它 将 会 带 你 转 到 ThemeRoller 页 面 ， 该 页 面 上 已 经 加 载 了 自 定义 主题 的 设 
置 ( 自 定义 主题 作为 请 求 的 参数 被 编码 到 URL 上 ) 。 可 以 任意 修改 主题 的 设置 ， 完 成 后 下 载 
新 的 文件 。 

好 了 ,现在 一 个 jQuery UI 的 主题 已 经 安装 完毕 、 整 装 待 发。 下面 就 进入 jQuery UI 提供 的 扩 
展 特效 吧 。 



































9.3 jQuery UI 特效 





在 第 5 章 ， 我 们 介绍 了 使 用 jQuery 动画 引擎 来 创建 自 定义 特效 是 多 么 简单 。jQuery UI 利用 
核心 动画 引 获 来 为 我 们 提供 了 一 侠 丰 是 的 现成 特效 , 其 中 一 些 还 实现 了 日 定义 特效 ( 我们 作为 练 
习 而 创建 的 特效 )。 

我 们 将 会 仔细 介绍 这 
心 方法 的 扩展 版 本 来 将 这 
效 的 新 方法 。 

我 们 先 来 看 下 这 些 特效 。 


特效 ， 也 会 看 到 jQuery UI 是 如 何 通 过 提供 ( 通 第 不 文 持 特效 的 ) 核 


此 
些 特效 注入 核心 jQuery 库 的 。 也 会 看 到 一 些 jQuery UI 提供 的 专注 于 特 





9.3.1 jQuery UI 特效 








jQuery UI 提供 的 所 有 特效 都 可 以 通过 effect () 方 法 来 独立 使 用 ， 无 需 再 用 其 他 方法 。 
effect () 方 法 可 以 用 来 开局 包 次 集 元 系 上 的 特效 。 语 法 如 下 所 未 。 
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Dy 去 站 去: effect 


effect (type, options, speed,callback) 
执行 包装 集 元 素 上 的 指定 特效 


参数 
type (字符 串 ) 要 运行 的 特效 。 为 以 下 参数 之 一 : plind、bounce、clip、drop、 


exXploaqe、fade、ftoldq、hghlight、puftf、pulsate、sSscale shake. 
size、slide 以 及 ttransfer。 参 见 表 9-1 来 了 解 这 些 特效 类 型 的 详细 信息 
options (对象 ) 提 供 核心 animate() 方 法 定义 的 指定 特效 的 选项 ( 参见 第 5 章 ), 此 外 ， 
每 个 特效 都 有 自己 的 一 组 选项 ， 可 以 指定 跨 多 个 特效 的 共用 选项 ， 参 见 表 9-1 
speed ( 字符 事 | 数字 ) 提供 slow、normal、fast 参数 之 一 或 者 以 毫秒 为 单位 的 特 
效 持 续 时 间 。( 可 选 ) 如 果 省 略 ， 则 默认 为 normal 
callback 《函数 ) 一 个 可 选 的 回调 函数 ， 在 特效 结束 后 为 每 个 元 素 所 调用 。 不 向 此 函数 
传递 任何 参数 ， 设 置 函 数 的 上 下 文 为 执行 动画 的 元 素 
返回 值 


包装 集 


oe 尽管 表 9-1 试图 描述 每 个 特效 的 行为 ,但 实际 上 直接 运行 特效 会 了 解 得 更 清楚 。 建 立 jQuery 
全 UI 特效 实验 室 就 是 为 了 这 个 目的 ,这 个 实验 室 页 面 如 图 9-5 所 示 ,也 可 以 从 chapter9/lab.ui-effects. 
html 找到 该 页 面 。 


从 站 
让 
| 字 jG 省 | 富 jhttp://localhost/jqia2/chapter9/lab.ui-effects.html 


所 jQuery UI Effects Lab 全 ) 
ce 
Effect options 
Erect: 
Speed: @ None © Slow © Normal O Fast © Milliseconds: 
direction: O unspecified © vertical © horizontal 
mode: @ unspecified © hide © show © effect 
times: 
distance: 





[jQuery in Action, 2nd Editio x/ [jQuery UI Effects Lab x Wm 








Apply | Reset | 


Executed command: 





«To err is human 一 
and to blame it on a 
computer is even 
more So0.» 


图 9-5 jQuery UI 特效 实验 室 人 允许 我 们 通过 不 同 的 选项 来 实时 地 观察 UI 特效 的 运行 效果 
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这 个 实验 室 人 允许 我 们 在 运行 中 观察 每 个 特效 。 选 中 了 一 个 特效 后 , 可 以 指定 的 特效 选项 如 控 
制 面板 所 示 ( 使 用 的 当然 是 jQuery UI 特效 ) 。 在 阅读 表 9-1 中 的 特效 说 明 时 ， 请 使 用 这 个 实验 
室 来 仔细 观察 每 个 特效 能 做 什么 ， 以 及 选项 如 何 影 响 特 将 的 运行 效 末 。 

表 9-1 中 摘 述 了 各 种 特效 及 其 选项 。 所 有 的 特效 都 接受 一 个 easing 选项 ， 用 来 指定 要 使 用 
特效 的 缓 动 兄 数 。 在 接 下 来 的 9.3.5 节 中 我 们 将 会 探讨 缓 动 的 概念 。 

在 阅读 表 9-1 中 的 条 目 时 ， 请 使 用 jQuery 特效 实验 室 在 运行 中 观察 每 个 特效 。 
> 回想 在 第 5 章 介绍 的 animate () 方 法 ， 这 个 方法 通过 逐步 改变 CSS 属性 值 来 实现 动画 。 你 
可 能 会 想到 ， 颜 色 属 性 是 不 文 持 动画 的 。 

那么 ,jQuery UI 实 现 了 用 来 对 元 素 的 育 景 颜色 应 用 动画 的 highlignt 特效 了 吗 ? 一 起 来 找 
找 吧 。 























表 9-1 jQuery UI 特效 
特效 名 称 的 描述 外 定 特效 的 选项 
blind direction: (字符 串 ) horizontal 或 vertical 两 者 之 一 。 如 
以 百叶 窗 的 方式 显示 或 者 隐藏 元 素 : 通过 ” 果 省 略 ， 则 默认 值 为 vertical 
门下 或 向 上 移动 下 边缘 ， 或 首 向 布 或 向 在 移 mode: (字符 种 ) show 或 hide (默认 值 ) 两 者 之 一 
动 右 边缘 来 实现 ， 具 体 的 实现 方式 取决 于 指 
定 的 选项 direction 和 mode 














Pomme 
使 元 素 在 垂直 或 者 水 平方 向 弹跳 ， 可 以 选 ” 果 省 略 ， 则 默认 值 为 up 
择 是 显示 还 是 隐藏 元 素 distance: (数字 ) 以 像素 为 单位 的 弹跳 距离 。 默 认为 20 个 像素 


mode: (字符 串 ) effect、show 或 hide 其 中 之 一 。 如 果 省 略 ， 
则 使 用 effect， 这 会 简单 地 使 元 素 在 原 地 弹跳 ， 而 不 会 改变 元 素 的 





可 见 性 
times: (数字 ) 弹跳 的 次 数 。 如 果 省 略 ， 则 默认 为 5 
clip direction: (字符 串 ) horizontal 或 vertical 两 者 之 一 。 如 





通过 将 元 素 的 两 条 相对 的 边框 移动 直至 在 ” 果 省 略 ， 则 默认 值 为 vertical 
中 间 相 遇 ， 或 反之 从 中 间 癌 外 移动 来 显示 或 mode: (字符 串 ) show 或 hiqe (默认 值 ) 其 中 之 一 
者 隐藏 元 素 

















drop qdirection: (字符 串 )1Ieftt( 默 认 值 ) 、right、up 或 down 
通过 使 元 素 看 起 来 像 是 掉 入 或 者 掉 出 页 面 ”其 中 之 
来 显示 或 者 隐藏 元 素 distance: (数字 ) 移动 元 素 的 距离 。 默 认为 高 度 或 者 宽度 的 一 





半 ， 根 据 特 效 移动 元 素 的 方向 而 定 
mode: (字符 串 ) show 或 hidqe (默认 值 ) 其 中 之 一 
explode mode: (字符 串 ) show、hide 或 toggle 其 中 之 一 
通过 将 元 系 分 解 成 很 多 人 寿 片 并 沿 帮 别 线 方 。 ”pieces: (数字 ) 在 特效 里 使 用 的 碎片 个 数 。 如 果 省 略 ， 则 默认 











门 移动 《就 像 是 元素 态 片 在 页 面 上 染 合 到 一 值 为 9。 注 意 ， 采 用 的 算法 可 能 会 为 了 提高 性 能 而 改变 这 个 数字 
起 或 者 发 散 出 来 ) 来 显示 或 者 隐藏 元 素 

fade mode: (字符 早 ) show、hide (默认 值 ) 或 toggle 其 中 之 一 
通过 调整 元 素 的 不 透明 度 来 显示 或 者 隐藏 

元 素 。 这 与 核心 的 渐 隐 特 效 一 样 ,但 没有 选项 
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特效 名 称 的 描述 
fold 
通过 分 开 或 者 合并 相对 的 一 组 边框 ， 然 后 
再 对 为 一 组 边框 做 相同 的 操作 来 显示 或 者 隐 
藏 元 系 


highlight 
在 显示 或 者 隐藏 元 素 时 通过 立即 改变 元 素 
的 背景 颜色 来 吸引 注意 力 











pulsate 

在 确定 显示 还 是 隐藏 元 素 之 前 调 高 或 者 调 
低 元 每 的 不 透明 度 
Puff 

在 调整 元 素 的 不 透明 度 时 原 地 放大 或 缩小 
元 素 
scale 


通过 一 个 百分比 来 放大 或 缩小 元 系 














shake 
水 平 或 垂直 地 来 回 晃 动 元 系 
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中 定 特效 的 选项 

horizFirst: (布尔 ) 如 果 是 true， 就 先 移动 水 平 的 边框 。 如 果 
省 略 或 指定 为 false， 则 先 移动 垂直 边框 
(字符 串 ) show 或 hide ( 默认 值 ) 其 中 之 一 

size: (数字 )“ 已 折 县 ”元 和 素 的 尺寸 , 以 像 系 为 单位 。 如 采 省 略 ， 
则 将 尺寸 设置 为 15 个 像素 

color: (字符 串 ) 用 作 高 亮 的 颜色 。 可 以 通过 css 颜 色 名 称 例如 
orange、 十 六 进 制 符号 例如 #ffffcc 或 #ffc， 或 者 三 元 组 的 RGB 例 
如 rgb (200,200,64) 来 表示 


(字符 串 ) show ( 默认 值 ) 或 hide 两 者 之 一 
(字符 串 ) show ( 默认 值 ) 或 hide 两 者 之 一 
(数字 ) 元 素 闪 烁 的 次 数 ， 默 认为 5 





mode: 











mode: 
mode: 


times: 


(字符 串 ) show 或 hide (默认 值 ) 两 者 之 一 
(数字 ) puff 特 效 的 目标 百分比 。 默 认为 150 


mode: 


percent: 


direction: (字符 串 ) horizontal、vertical 或 both 其 中 
之 一 。 如 采 省 略 ， 则 默认 为 both 

fade: (布尔 ) 如 果 指 定 为 true， 则 根据 是 显示 还 是 隐藏 元 素来 
同时 调整 不 透明 度 和 矿 才 

from: ( 对象 ) 一 个 对 象 , 其 height 和 width 属 性 指定 初始 尺寸 。 
如 果 省 略 ， 则 从 元 系 当 前 尺寸 开始 变化 





mode: (字符 串 ) show、hide、toggle 或 effect (默认 值 ) 其 
中 之 一 
origin: (数组 ) 如 果 mode 不 是 effect， 则 为 特效 定义 基础 消 


失 点 , 指定 为 包含 两 个 字符 串 的 数组 , 可 设置 的 值 有 : top、middle、 
bottom 和 left、center、right。 默认 为 ['middle','center'] 


percent: (数字 ) 缩放 的 比例 。 当 mode 为 hide 时 默认 为 0, 为 
show 时 默认 为 100 

scale: (字符 串 ) 要 缩放 的 元 北 区 域 ， 指 定 为 pox， 则 调整 边框 
和 内 边框 的 尺寸 ; 指定 为 content ， 则 调整 元 素 内 容 的 尺寸 。 指 定 为 
both， 则 同时 调整 二 者 尺寸 ， 默 认为 both 

direction: (字符 串 ) up、down、left 或 right 其 中 之 一 。 如 
果 省 略 ， 则 默认 为 left 
(数字 ) 以 像素 为 单位 的 晃动 距离 ， 默 认为 20 个 像素 
(数字 ) 每 次 晃动 的 速度 ， 默 认为 140 上 毫秒 


(字符 串 ) show、hide、toggle 或 effect (默认 值 ) 其 





distance: 








duration: 

mode: 
中 之 一 
(数字 ) 哎 动 的 次 数 。 如 有 果 省 略 ， 则 默认 为 3 


times: 
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〈 续 ) 
特效 名 称 的 描述 外 定 特效 的 选项 
G1ZE from: ( 对象 ) 一 个 对 象 , 其 height 和 width 属性 指定 初始 尺寸 。 
重新 设 定 元 素 的 宽度 和 高 度 。 类 似 于 scale， ”如果 省 略 ， 则 从 元 素 当 前 尺寸 开始 变化 
但 指定 日 标 信 寸 的 万 式 个 同 to: (对 象 ) 一 个 对 象 ， 其 height 和 width 属 性 指定 最 终 尺寸 。 
如 果 省 略 ， 则 以 元 素 当 前 尺寸 结束 变化 
origin: (数组 ) 为 特效 定义 基础 消失 点 ， 指 定 为 包含 两 个 字符 
串 的 数组 , 可 设置 的 值 有 : top、middle、bottom 和 left、 center、 
right。 默 认为 ['middle','center'] 
scale: (字符 串 ) 元 素 要 缩放 的 区 域 ， 指 定 为 box， 就 会 调整 边 
框 和 内 边框 的 尺寸 指定 为 content， 就 会 调整 元 素 内 容 的 尺寸 。 指 
定 为 both， 则 同时 调整 二 者 尺寸 ， 默 认为 both 
restore: (布尔 ) 保存 和 恢复 正在 执行 动画 的 元 素 及 其 子 节 点 的 
某 些 Css 属性， 并 且 在 应 用 特效 之 后 对 其 进行 恢复 。 保 存 哪些 属性 是 
未 公开 的 〈 包 括 外 边框 和 内 边框 的 设置 ) ， 这 些 属性 很 大 程序 上 取决 
于 其 他 选项 以 及 元 素 所 处 的 环境 。 只 有 在 某 个 属性 不 能 按 你 预期 的 那 
样 恢 复 初 始 值 时 才 要 使 用 这 个 选项 
这 个 选项 默认 为 false。( 注意 , scale 特效 内 部 使 用 了 size 特 效 ， 
并 把 xestore 选 项 设置 为 Lrue" ) 
Slide direction: (字符 品 )up、down、left 或 right 其 中 之 一 。 如 
移动 元 素 , 使 其 看 起 来 就 像 滑 入 或 滑 出 页 面 ” 果 省 略 ， 则 默认 值 为 left 
distance: (数字 ) 滑动 元 素 的 距离 。 这 个 值 应 该 小 于 元 素 的 宽 
度 或 高 度 ( 按 方 回 而 定 ), 并 且 默 认 值 是 元 素 当 前 的 宽度 (Qirection 
为 left 或 right 时 ) 或 者 高 度 (Qirection 为 up 或 aown 时 ) 
mode: (字符 串 ) show (默认 值 ) 或 hide 两 者 之 一 
transfer classname: (字符 串 ) 一 个 将 要 应 用 到 轮廓 元 素 上 的 附加 类 名 。 
为 临时 创建 的 轮廓 元 素 应 用 动画 ， 使 元 素 “指定 这 个 选项 不 会 阻止 应 用 类 ui -effects-transfezr 到 元 素 上 
有 年 当 征 移 到 对 作 下 素 上 。 几 须 运 过 矢 to (字符 电 ) jQuery 选择 器 ， 用 来 指定 将 轮廓 元 素 移动 到 的 那个 


-effects_transfer 有 CSS 规 则 或 指定 目标 元 素 。 没 有 默认 值 ， 必 须 指定 这 个 选项 特效 才能 工作 
为 选项 的 类 来 定义 轮廓 元 素 的 外 观 





















































9.3.2 扩展 核心 库 的 动画 功能 


如 果 仔 细 分 析 在 本 书 中 已 经 讨论 过 的 大 部 分 特效 , 包括 jQuery UI 提 供 的 列表 (参见 表 9-1 ) ， 
就 可 以 知道 大 部 分 特效 部 是 通过 改变 元 素 位 置 、 尺 寸 以 及 不 透明 度 来 实现 的 。 虽然 这 给 了 我 们 很 
大 的 日 主权 (更 不 用 说 jQuery UI ) 来 创建 特效 ， 但 是 如 果 能 够 组 合 使 用 对 颜色 应 用 动画 的 能 
那么 可 创建 特效 还 会 大 大 增加 。 

核心 jQuery 动画 引擎 没有 对 颜色 应 用 动画 的 能 力 ， 因 此 jQuery UI 扩展 了 核心 animate () 




















QD 这 个 说 法 不 完全 正确 ，scale 特效 的 确 在 内 部 使 用 了 size 特效 ,但 是 只 有 在 mode 参数 不 等 于 effect 时 才 设 
置 restore 为 true。 
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方法 的 功能 ， 以 便 人 允许 对 指定 颜色 值 的 CSS 属性 应 用 动画 效果 。 

这 个 增强 的 功能 文 持 以 下 的 CSS 属性 : 

UD backgroundColor 

UD borderBottomColor 

UD borderLeftColor 

DD borderRightColor 

UD porderTopColor 

DD color 

UD outlineColor 

因为 所 有 的 特效 最 终 部 会 被 这 个 增强 的 功能 执行 , 所 以 特效 是 如 何 开始 的 并 不 重要 一 一 所 有 
指定 特效 的 方式 都 可 以 利用 这 个 增强 功能 。 稍 后 当 我 们 研究 jQuery UI 提供 的 核心 库 的 其 他 扩展 
时 ， 你 就 会 了 解 这 个 扩展 功能 的 重要 性 。 
9.3.3 ”增强 的 可 见 性 方法 

我 们 在 第 5 章 中 讨论 过 ， 如 果 问 核心 jQuery 的 基本 可 见 性 方法 (也 就 是 show() 、hiae () 
以 及 toggle() ) 提供 了 持续 时 间 值 ， 这 些 方 法 就 会 使 用 一 个 调整 损 度 、 高 度 以 及 元 素 不 透明 度 
的 预定 义 特效 来 显示 或 隐藏 目标 元 素 。 但 是 如 末 想 要 更 多 的 选择 该 怎么 办 呢 ? 

jQuery UI 通过 在 核心 jQuery 中 扩展 这 些 方法 ， 给 予 我 们 这 种 灵活 性 以 便 可 以 使 用 表 9-1 中 
列 出 的 任何 特效 。 这 些 方 法 的 扩展 语法 如 下 所 示 。 




















方法 语法 : 扩展 的 可 见 性 方法 
show(effect,options, speed,callback) 


hide(effect,options,speed,callback) 


toggle (effect,options,speed,callback) 
使 用 指定 的 特效 来 显示 、 隐 藏 或 者 切换 包装 元 素 的 可 见 性 


参数 

全 上 于 会 GE (字符 事 ) 调整 元 素 可 见 性 时 所 使 用 的 特效 。 可 以 使 用 表 9-1 中 列 出 的 任何 
特效 

options (对 象 ) 为 指定 的 特效 提供 如 表 9-1 所 示 的 选项 

speed (字符 事 | 数 字 ) 提供 slow、normal、fast 参数 之 一 或 者 以 之 秒 为 单位 的 特 


效 持 续 时 间 。( 可 选 ) 如 果 省 略 ， 则 默认 为 normal 
callback ( 辽 数 ) 可 选 的 回调 函数 ， 在 特效 结束 后 为 每 个 元 素 调 用 。 不 向 此 函数 传递 任 
何 参 数 ， 并 设置 函数 上 下 文 为 正在 执行 动画 的 元 素 
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不 管 是 否 意识 到 , 你 已 经 看 到 了 一 个 使 用 这 些 扩展 的 可 见 性 特效 的 例子 。 在 jQuery UI 特效 实 
， 当 改变 特效 下 拉 列 表 值 的 时 候 , 就 会 使 用 以 下 语句 删除 任何 不 适合 新 选中 特效 的 选项 控件 : 
$ (someSelector) .hide('puff').; 

同时 ， 通 过 下 面 这 句 代 人 码 来 显示 适合 选中 特效 的 控件 : 

Ss(someSelector) .show('slide').; 


作为 高 级 练习 ， 请 复制 jQuery UI 特效 实验 室 ， 然 后 将 其 转变 为 jQuery UI 的 Show、Hide 以 





> 及 Toggle 实验 室 : 


口 添加 一 组 单 选 按钮 控件 来 选择 这 三 个 可 见 性 方法 之 一 : show()、hiae () 以 及 toggle() ; 
口 当 单 击 Apply 按钮 的 时 候 , 确定 选中 的 是 哪个 方法 , 然后 执行 该 方法 以 取代 effec () 方法。 
可 见 性 方法 不 是 jQuery UI 通过 和 额外 的 功能 来 扩展 的 唯一 一 组 核心 方法 。 下 面 来 看 看 扩展 的 





核心 方法 还 有 哪些 。 
9.3.4 为 类 转换 应 用 动画 特效 


你 可 能 会 回想 起 ， 核 心 jQuery 的 animate () 方 法 可 以 指定 一 套 CSS 属性 ， 动 画 引擎 会 逐渐 修 





改 这 些 属性 ， 以 便 创建 动画 特效 。 因 为 CSS 类 是 CSS 属性 的 集合 ， 所 以 允许 对 类 转换 应 用 动画 也 是 
理所当然 的 。 


jQuery UI 确实 也 提供 了 :扩展 类 转换 方法 addClass()、removeClass() 以 及 toggleClass() 


能 让 元 素 呈 现 出 CSS 属性 变化 的 动画 效果 。 扩 展 的 方法 语法 如 下 所 示 。 


方法 语法 : 扩展 的 类 方法 


addClass (class,speed,easing,callback,) 
removeClass (class, speed,easing,callback) 
toggleClass (class,force, speed,easing,callback) 


在 包装 元 素 上 添加 、 删 除 或 者 切换 指定 的 类 名 。 如 果 省 略 speed 参数 ， 这些 方法 的 行为 和 未 


扩展 的 核心 方法 完全 一 样 

参数 

Class (字符 串 ) 将 要 添加 、 删 除 或 者 切换 的 CSS 类 名 或 者 空格 分 隔 的 类 名 列表 
speed (字符 串 | 数字 ) 提 供 slow、normal、fast 或 者 以 毫秒 为 单位 的 特效 持续 时 间 。 


(可 选 ) 如 果 省 略 ， 则 不 会 发 生动 画 特效 


easing (字符 串 ) 将 要 传 入 animate() 方 法 的 缓 动 函数 的 名 称 , 参见 第 5 章 对 animate () 


的 描述 以 获得 更 多 的 信息 


eallback (函数 ) 在 动画 结束 时 调用 的 回调 函数 。 参 见 第 $ 章 对 animate() 的 描述 以 获 


得 更 多 的 信息 


force (布尔 ) 如 果 指 定 为 true， 则 强制 toggleClass() 方 法 添加 类 名 ， 如 果 指 定 
为 false， 则 强制 删除 类 名 

返回 值 

包 汶 集 
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除了 扩展 这 些 核心 的 类 转换 方法 ，jQuery UI 还 添加 了 一 个 新 的 有 用 的 类 操作 方法 switchCclass () ， 
它 的 语法 如 下 所 示 。 
方法 语法 : switchClass 


switchClass (removed,added, speed,easing,callback) 


使 用 一 个 转换 特效 来 删除 指定 的 一 个 或 者 多 个 类 ， 同 时 增加 指定 的 一 个 或 者 多 个 特效 


参数 

removed (字符 串 ) 将 要 删除 的 CSS 类 名 或 者 空格 分 隔 的 类 名 列表 

added (字符 串 ) 将 要 添加 的 CSS 类 名 或 者 空格 分 隔 的 类 名 列表 

speed (字符 串 | 数字 ) ( 可 选 地 ) 提供 slow、normal、fast 或 以 毫秒 为 单位 的 特效 
持续 时 间 。 如 果 省 略 ， 则 由 animate() 方 法 确定 默认 值 

easing ( 字符 串 ) 要 传 入 animate() 方 法 的 缓 动 函 数 的 名 称 。 参见 第 5 章 对 animate () 


的 描述 以 获得 更 多 的 信息 

callback (函数 ) 在 动画 结束 时 调用 的 回调 函数 。 参 见 第 5 章 对 animate() 的 描述 以 获 
得 更 多 的 信息 

返回 值 


包装 集 





jQuery UI 就 如 何 编 写 代码 以 动画 方式 操作 元 系 给 了 我 们 很 多 选择 ， 包 括 effct () 方 法 以 及 
对 核心 的 可 见 性 和 类 转换 方法 的 扩展 。 

能 不 能 只 使 用 animate () 方 法 来 处 理 所 有 这 样 的 情况 呢 ? 当然 可 以 。 但 是 考虑 到 代码 的 清晰 
性 ， 使 用 名 为 hiae () 的 方法 来 隐藏 元 系 (即使 是 以 动画 方式 ) 比 使 用 名 为 animate () 的 方法 更 
具有 意义 。jQuery UI 让 我 们 能 够 使 用 对 代码 上 下 文 最 具有 意义 的 方法 ， 而 不 管 是 否 使 用 了 动画 。 

jQuery UI 在 动画 领域 提供 的 为 一 个 扩展 是 一 个 相当 庞大 的 绥 动 函数 集合 ,扩展 了 jQuery 核 
心 所 提供 动画 效果 。 


9.3.5 ” 缓 动 特效 


在 第 5 章 中 讨论 动画 的 时 候 , 我 们 引入 了 绥 动 函数 的 概念 ( 非 正式 地 称 为 组 动 特效 ) 用 来 控 
制 动 画 进行 的 节奏 。jQuery 核心 提供 了 两 个 组 动 特效 : linear 和 swing。jQuery UI 将 swing 
重 命名 为 jswing， 添 加 了 目 己 的 swing 版 本 ， 并 且 添 加 了 其 他 31 个 组 动 特效 。 

我 们 可 以 在 任何 接受 散 列 选项 的 动画 方法 中 指定 一 个 组 动 特效 。 如 前 所 述 , 这 些 选 项 最 终 都 
会 被 传人 animate () 核 心 方法 ， 所 有 的 动画 方法 最 终 都 会 调用 该 方法 来 执行 动画 或 者 特效 。 这 
些 核 心 选项 之 一 就 是 easing， 用 来 识别 将 要 使 用 的 绥 动 函数 的 名 称 。 

加 载 了 jQuery UI 之 后 ， 所 有 可 用 的 绥 动 特效 的 清单 如 下 : 


JU linear JU easeInQOutQuart JU easeOutCirc 


























JU swing DD easeInQuint JU easeInOutCirc 
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DD jswing DD easeOutQuint DD easeInElastic 

DD easeInQOuad DD easeInOutOQuint UD easeOutElastic 
DD easeoutouad UD easeInSine UD easeInOutElastic 
DUD easeInOutOuad DD easeOutSine DD easeInBack 

DD easeInCubic DD easeInOutSine UD easeOutBack 

DD easeOutCubic UD easeInExpo UD easeInOutBack 

UD easeInOutCubic DD easeOutExpo JU easeInBounce 

UD easeInQuart UD easeInOutExpo DD easeOutBounce 

UD easeOutQuart LI easelIncCire DD easeInOutBounce 





几乎 无 法 用 语言 来 描述 每 个 缓 动 特效 是 如 何 运作 的 , 我 们 需要 在 运行 中 观察 它们 才能 了 解 指 
定 的 缓 动 特效 是 如 何 影响 动画 的 。 因 此 我 们 可 以 使 用 jQuery UI 缓 动 实验 室 页 面 ， 观 察 当 把 缓 动 
特效 应 用 到 不 同 的 动画 时 它们 是 如 何 运 作 的 。 该 实验 室 如 图 9-6 所 示 ， 也 可 以 从 文件 
chapter9/lab.ui-easings.html 获取 。 





EO FRJQvery Ul Easings Lab x om 和 | 和 | 和 


和 他 6 会 http:/ /localhost:8080/jqia2/chapter9 /lab.ui-easings.html 





| jQuery UI Easings Lab 





Easings options 
Easing: | 一 choose one 一 “ 交 ] 
Effect: | 一 choose one 一 [$$ 
Speed: @ None © Siow OQ Normal © Fast © Milliseconds: 


Apply | Reset | 


Executed command: 

















图 9-6 jQuery UI 绥 动 特效 实验 室 向 我 们 展示 了 当 把 不 同 的 绥 动 特效 应 用 到 动画 特效 
时 它们 是 如 何 运行 的 
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闪 


注意 D000000jRQuvery UIDUODODOO SYGUO000000000000 http:/jqueryui. 
com/demos/effect/#easing [| DO 0 


这 个 实验 室 可 以 让 我 们 尝试 将 不 同 的 绥 动 特效 与 不 同 的 特效 配合 使 用 ,为 了 更 好 地 看 到 在 每 
个 缓 动 函数 运行 的 变化 过 程 ， 我 们 建议 尝试 如 下 操作 。 

(1) 选择 要 观察 的 组 动 特效 。 

(2) 选择 scale 特效 。 选 中 scale 之 后 ，percent 选项 被 便 编 码 为 25。 

(3) 将 速度 设 得 非常 慢 一 一 比 slow 的 设置 还 要 慢 。 尝 试 设置 为 10 秒 ( 10 000 坚 秒 ) 来 观察 选 
中 的 缓 动 特效 是 如 何 有 影响 测试 对 象 的 缩放 比例 。 

下 面 来 看 jQuery UI 提供 的 为 一 个 实用 功能 。 





9.4 ”高 级 定位 





CSS 定位 能 较为 轻松 地 定位 页 面 内 的 元 素 。 结合 使 用 jQuery, 就 能 让 元 系 定 位 变 得 非常 简单 
前 提 是 知道 要 在 哪里 定位 元 系 。 
例如 ， 如 末 我 们 知 直 要 将 元 素 移动 到 茶 个 绝对 位 置 ， 就 可 以 这 样 写 : 








$('#someElement') .css(t 
Position: 'absolute', 
top: 200, 
left: 200 


I 

但 是 如 果 想 要 相对 于 另 一 个 元 素来 定位 这 个 元 素 ， 该 怎么 办 呢 ? 例如 ， 将 元 素 放 置 到 另 一 
个 元 率 的 右边 并 顶部 对 齐 ， 该 怎么 做 ”或 者 将 元 素 放 置 在 夯 一 个 元 素 的 下 面 并 中 心 对 齐 ， 该 怎 
么 做 呢 ? 

没 问 题 ， 真 的 。 我 们 可 以 使 用 核心 jQuery 方法 来 获取 所 涉及 的 元 素 的 太 十 和 位 置信 息 ， 然 
后 做 一 些 数学 处 理 ， 再 使 用 处 理 的 结果 来 对 目标 元 素 进 行 绝 对 定位 。 

尽管 这 不 成 问题 , 但 实现 起 来 还 是 需要 相当 多 的 代码 ， 如 采 在 计算 新 位 置 时 不 小 心 搞 错 公式 
的 话 ， 代 码 就 很 容易 出 问题 。 这 样 的 代码 可 读 性 也 不 高 ， 尤 其 是 对 于 那些 当初 没有 参与 编写 代码 
的 开发 者 来 说 ， 不 可 能 随便 看 看 代码 就 能 知道 代码 要 做 什么 。 

jQuery UI 通过 提供 一 个 方法 来 帮助 我 们 ， 这 个 方法 不 仅 抽象 出 用 来 计算 元 系 相 对 于 其 他 
元 素 位 置 的 公式 《后面 将 会 看 到 更 多 指定 元 素 相 对 位 置 的 方式 )， 而 且 可 以 以 一 种 极其 易 读 的 
方式 来 表示 。 

这 个 方法 是 曾 在 第 3 章 中 探讨 过 的 position() 方 法 (用 来 获取 元 素 相对 于 其 偏 移 父 元 素 的 
位 置 ) 的 重 载 。 场 法 如 下 所 示 。 
































Q@ 这 个 说 法 不 正确 ， 这 个 示例 是 基于 HTML canvas 元 素 的 ， 而 不 是 基于 SVG 的 。 
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方法 语法 : position 

position (options ) 

使 用 options 提供 的 信息 来 对 包装 元 素 进行 绝对 定位 

options (对象 ) 提供 用 来 指定 如 何 定 位 包装 集 元 素 的 信息 ， 参 见 表 9-2 

返回 值 

包装 集 
你 可 以 通过 提供 的 实验 室 页 面 来 观察 jQuery UI 的 position() 方 法 的 运行 方式 。jQuery UI 
定位 实验 室 如 图 9-7 所 示 ， 也 可 以 从 chapter9/lab.ui-positioning.html 获取 。 


WO Fovery ui Posivoning tab x Wo Eee 
各 字 会 灾 http://localhost:8080 /jgqia2 /chapter9/lab.uvi-positioning.html 






* 口 - £- 


| Positioning options 
my: | left "3] | top "$) 
at: | left E>| | top '$】 





a 


Executed command: 

















图 9-7 jQuery UI 定位 实验 室 允 许 我 们 在 运行 中 观察 由 jQuery UI 重 载 的 position() 方 法 
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表 9-2 jQuery Ul position() 方 法 的 选项 





















































、 和 a 是 否 在 实验 室 
选 项 描 述 页 面 中 
my (字符 串 ) 指定 包装 元 素 ( 要 进行 重 定 位 的 元 素 ) 的 位 置 来 使 其 与 目标 元 素 或 在 at v 
里 设 定 的 位 置 对 齐 。 Eop. TefEtE、 bottom., right 以 及 center 中 的 两 个 值 构成 
(由 一 个 空格 符 分 隔 ) ， 其 中 第 一 个 值 是 水 平 坐标 值 , 第 二 个 是 垂直 坐标 值 。 如 果 只 
指定 单个 值 ， 则 另 一 个 默认 为 centerz。 指 定 的 单个 值 是 被 当做 是 水 平 的 还 是 垂直 
的 取决 于 你 所 使 用 的 值 (例如 ，top 是 垂直 坐标 值 ， 而 *ight 则 是 水 平 坐标 值 ) 
示例 :top 或 者 bottom right 
at (字符 串 ) 指定 目标 元 叉 的 位 置 来 作为 重 定 位 元 素 的 目标 位 置 。 接 受 的 值 和 my 选 V 
项 相同 
示例 : right 或 者 left center 
ee (选择 器 | 事件 ) 识别 目标 元 素 ( 作为 重 定位 包装 元 素 的 目标 ) 的 选择 带 ， 或 者 作 v 
为 日 标 位 置 的 包含 鼠标 坐标 的 Event 实 例 
Gffset (字符 串 ) 指定 添加 到 计算 出 来 的 位 置 的 任何 偏 移 量 ， 作 为 两 个 像素 值 分 别 指定 v 


left 和 top。 人 允许 负 偏 移 量 。 例 如 : 10~ 20 
如 果 指 定单 个 值 ， 它 会 同时 应 用 于 left 和 top。 默 认 值 是 0 


collision (字符 串 ) 当 被 定位 的 元 素 在 任何 方向 超出 窗 体 边界 时 , 用 来 指定 应 用 的 规则 。 接 
受 下 面 所 示 的 值 〈 移 水 平 后 垂直 规则 ) 。 
flip: 默认 值 ， 翻 转 元 素 到 相反 的 方 同 ， 然 后 再 次 运行 冲突 检测 。 如 采 两 个 方 癌 
均 不 在 窗 体 内 ， 则 回 退 到 center 位 置 
fit: 保持 元 素 在 原 方 向 ， 通 过 调整 位 置 以 便 被 定 为 的 元 素 不 会 超出 窗 体 边界 
none: 禁用 冲突 检测 
如 果 指 定单 个 值 ， 它 会 同时 应 用 到 水 平和 垂直 方向 
using ( 函数 ) 函数 ， 用 来 将 换 内 部 函数 来 改变 元 素 的 位 置 。 为 每 个 包装 元 素 调用 ,传递 
由 left 和 top 属 性 组 成 的 散 列 对 象 (也 就 是 计算 出 的 目标 位 置 ) 的 单个 参数 ， 需 要 
定位 的 元 素 被 设置 为 函数 上 下 文 






































总 在 阅读 表 9-2 中 的 选项 时 ， 请 使 用 定位 实验 室 来 熟悉 选项 的 操作 。 如 果 你 一 次 就 能 把 尾巴 钉 
在 合适 的 位 置 上 上 ， 那 就 给 自己 点 奖励 吧 。 
你 可 能 一 边 观 察 这 些 选 项 的 名 称 一 边 对 自己 说 ,“ 他 们 在 想 什 么 ? at? my? of? 这 些 到 底 是 
什么 ? ” 
一 开始 你 可 能 不 明白 这 些 名 字 的 含义 。 但 如 果 你 在 使 用 定位 实验 室 的 时 候 观察 生成 的 语句 ， 
就 会 发 现 它们 的 玄机 。 如 果 还 没有 明白 ， 则 思考 下 面 的 语句 : 














$('#someElement') .position(t 
my: 'top center', 
at: 'bottom right', 
of: '#someOtherElement' 


}); 
这 看 起 来 就 像 是 一 句 英 文 ! 即使 是 没有 谈 过 计算 机 代码 的 人 都 能 差不多 知道 这 个 语句 要 做 什 
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么 。( 为 什么 计算 机 的 便 件 设备 要 用 到 这 么 别扭 的 符号 呢 ? ) 
大 部 分 API 郡 可 以 从 这 种 “ 狗 狂 ”中 受益 。 


9.5 小 结 


在 本 章 中 我 们 开始 对 jQuery UI 进行 深入 的 研究， 在 本 书 结束 前 我 们 会 一 直 探 讨 jQuery UI 
这 个 话题 。 

我 们 了 人 解 到 作为 核心 jQuery 库 的 官方 伙伴 ，jQuery UI 至 有 特殊 的 地 位 ， 也 知道 了 如 何 从 
http://jqueryui.com/download 下 载 该 库 的 目 定 义 版 本 ( 同时 包括 一 个 预定 义 主题 )。 还 看 到 了 下 载 
压 红包 中 的 内 容 ， 以 及 将 该 库 添加 到 Web 应 用 程序 目录 结构 的 典型 方法 。 

然后 ， 我 们 探讨 了 jQuery UI 库 的 主题 设计 能 力 ， 以 及 如 何 布局 其 定义 的 CSS 类 ， 包 括 如 何 
通过 命名 约定 来 组 织 这 些 CSS 类 。 

我 们 考察 了 官方 的 ThemeRoller 在 线 应 用 程序 ( http://jqueryui.com/themeroller/ ) ， 可 以 用 来 
调整 一 个 预定 义 的 主题 或 者 完全 从 头 创建 新 的 主题 。 

本 章 的 剩余 部 分 考察 了 jQuery 为 核心 库 所 做 的 扩展 。 

我 们 看 到 了 核心 动画 引 警 是 如 何 被 扩展 成 提供 大 量 已 命名 的 特效 ， 可 以 很 容易 地 使 用 
effect () 方 法 来 局 动 这 些 特效 。 

我 们 也 看 到 jQuery UI 如 何 扩展 可 见 性 方法 show()、hiqde() 和 toggle() 来 和 这 些 新 特效 共 
同 工 作 。 相同 的 扩展 方式 也 被 用 于 类 转换 方法 : addclass() 、removeClass()、toggleClass () 
以 及 新 定义 的 switchclass () 方 法 。 

然后 我 们 讨论 了 30 个 jQuery UI 添加 的 绥 动 函数 ， 动 画 引 苟 用 它们 来 控制 动画 效 采 。 

最 后 ， 我 们 考察 了 对 核心 position() 方 法 的 一 个 扩展 ， 它 允许 我 们 以 非常 易 读 的 方式 根据 
相对 于 其 他 元 素 的 位 置 或 者 鼠标 事件 的 位 置 来 定位 元 和 素 。 

这 只 是 个 开始 。 继 续 阅 读 下 一 章 ， 我 们 将 会 学 习 jQuery UI 的 另 一 个 主要 部 分 : 鼠标 交互 。 
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jQuery UI 鼠标 交互 : 
跟随 鼠标 的 移动 


本 章 内 容 

口 核 心 鼠 标 交互 部 件 
口 实现 拖 放 操作 

口 使 元 素 可 排序 

口 允许 改变 元 素 尺 十 
口 使 元 素 可 选择 








大 多 数 可 用 性 专家 认为 : 直接 操作 是 产生 良好 用 户 界面 的 关键 ,与 模拟 用 户 活动 的 界面 相 比 ， 
允许 用 户 直 接 操 作 元 素 并 立即 看 到 操作 所 产生 的 效果 是 一 个 更 好 的 用 户 体验 。 

以 对 列表 中 的 元 素 排 序 为 例 。 如 何 让 用 户 为 元 素 指定 一 种 排列 顺序 呢 ? 如 果 只 使 用 HTML 4 
提供 的 一 套 基 本 控件 ， 就 没有 足够 的 灵活 性 来 完成 这 件 事 情 。 在 元 素 列 表 后 面 加 个 文本 框 (用户 
必须 在 其 中 输入 序号 值 )， 可 用 性 又 大 打折 扣 。 

如 果 能 够 让 用 户 选中 并 拖 动 列表 中 的 元 素 , 把 它们 来 回 移 动 ,就 能 排出 满意 的 结果 呢 ? 这 种 
机 制 (使 用 直接 操作 ) 显然 是 上 乘 的 做 法 ,但 是 只 使 用 HTML 基本 控件 集 是 做 不 到 的 。 

核心 交互 部 件 (关注 直接 操作 ) 是 创建 jQuery UI 的 基石 ， 它 们 在 呈现 给 用 户 的 用 户 界 面 类 
型 方面 提供 了 更 强大 的 功能 和 更 高 的 灵活 性 。 

核心 交互 部 件 为 在 页 面 使 用 鼠标 指针 添加 了 高 级 的 行为 。 我 们 可 以 目 己 使 用 这 些 交 互 部 件 
贯穿 本 章 始 终 )， 同 时 它们 也 是 创建 许多 其 他 的 jQuery UI 库 的 基石 。 

核心 交互 部 件 包含 如 下 内 容 。 

口 拖 动 一 一 在 页 面 上 移动 元 素 ( 10.1 节 )。 

口 放置 一 一 把 拖 动 的 元 素 放 置 到 其 他 元 素 上 (10.2 市 )。 

口 排序 一 一 使 元 素 按 顺 序 排列 (10.3 节 )。 

口 改变 尺寸 一 一 改变 元 素 的 尺寸 ( 10.4 市 )。 

口 选择 一 一 使 通常 情况 下 不 可 选择 的 元 素 转变 为 可 选择 的 元 素 (10.5$ 节 )。 

在 学 习 本 章 的 过 程 中 你 将 看 到 ,核心 交互 部 件 是 互 为 基础 的 。 为 了 发 挥 本 草 的 最 大 作用 , 建 
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议 你 按照 顺序 学 习 本 音 。 这 可 能 是 篇 幅 很 长 的 一 章 ， 但 是 jQuery UI 方 法 有 痢 某 种 程度 的 一 致 性 
(反映 在 本 章 各 节 的 结构 中 ), 一 旦 你 熟悉 了 这 些 方法 是 如 何 组 织 的 之 后 , 就 能 很 容易 地 学 习 本 章 
全 部 的 知识 。 

与 鼠标 指针 交互 是 任何 GUI 不 可 或 缺 和 核心 的 部 分 。 尽 管 有 一 些 简 单 的 鼠标 指针 交互 动作 
被 内 置 在 Web 界面 中 (例如 单 击 )， 但 Web 本 时 并 不 支持 某 些 可 用 于 加 面 应 用 的 高 级 交互 方式 。 
这 个 缺点 的 最 好 例证 是 缺少 对 拖 放 操作 的 支持 。 

拖 放 操 作 是 果 面 用 户 界 面 中 普遍 存在 的 一 种 交互 技术 。 例 如 ， 在 任何 介面 系统 的 GUI 文件 
管理 融 中 , 我 们 都 可 以 轻松 地 在 文件 系统 中 将 文件 在 文件 夹 之 间 来 回 拖 放 , 实现 复制 或 者 移动 操 
作 , 甚至 把 这 些 文件 拖 放 到 垃圾 桶 或 者 废 纸 笋 图标 上 来 删除 它们 。 但 是 尽管 这 种 交互 风格 在 蝎 面 
应 用 中 非常 流行 ， 在 Web 应 用 中 却 很 少见 到 ， 这 主要 是 因为 现代 浏览 器 缺少 对 拖 放 操作 的 原生 
文 择 ， 而 且 正 确 地 实现 这 个 功能 也 是 一 个 相当 艰巨 的 任务 。 

“艰巨 ? ”你 可 能 会 大 突 道 , “这 只 需要 一 点 鼠标 事件 和 CSS 小 技巧 ， 有 什么 大 不 了 的 ? ” 

尽管 高 层次 的 概念 并 不 难以 把 握 〈 特别 是 在 使 用 强大 的 jQuery 的 情况 下 )， 但 事实 证 明 实 现 
拖 放 支持 的 细节 (特别 是 以 一 种 健壮 上 且 独 立 于 浏览 器 的 方式 )， 会 很 快 变 得 痛苦 起 来 。 不 过 就 像 
之 前 jQuery 和 它 的 部 件 为 我 们 减轻 负担 那样 ，jQuery UI 再 次 以 相同 的 方式 添加 了 对 拖 放 操 作 的 
直接 文 持 。 

但 是 在 能 够 拖 动 和 放置 元 系 之 前 ， 先 来 学 习 如 何 拖 动 元 素 ， 这 也 是 我 们 的 起 点 。 


10.1 来 回 拖 动 元 素 


尽管 在 大 部 分 的 词典 中 找到 可 拖 动 ( draggable ) 这 个 词 很 困难 , 但 是 这 个 术语 通常 用 来 指 拖 
放 操 作 中 可 以 被 来 回 拖 动 的 项 目 。 同 样 ， 它 也 是 jQuery UI 用 来 摘 述 这 类 元 素 的 术语 ， 并 把 它 用 
作 方 法 名 称 。 这 些 方法 可 以 让 匹配 集 的 元 素 也 具备 可 拖 动 功能 。 

在 介绍 araggapble () 方 法 的 语法 之 前 ， 先 来 花 点 时 间 讨 论 一 下 jQuery UI 中 经 常用 到 的 习惯 

为 了 尽 可 能 地 减少 对 方法 命名 空间 的 侵占 , jQuery 中 的 很 多 方法 都 是 根据 传人 参数 的 性 质 来 
服务 于 多 重 目的 。 这 不 是 什么 特别 新 的 概念 一 一 我 们 已 经 在 核心 jQuery 中 看 到 过 很 多 类 似 的 情 
况 。 但 是 jQuery UI 将 方法 重 载 市 人 了 更 遍 层 级 。 我 们 将 看 到 相同 的 方法 可 以 在 很 多 关联 的 动作 
上 使 用 。 

draggable() 方 法 就 是 一 个 绝 好 的 例子 。 这 个 方法 不 仅 可 以 用 来 使 元 素 可 拖 动 ， 而且 用 来 控 
制 元 硒 各 个 方面 的 可 拖 动 性 质 ( 包括 禁用 、 销 毁 以 及 重新 启用 元 床 的 可 拖 动 性 )， 同 时 还 用 来 设 
置 和 获取 单个 的 可 拖 动 性 选项 。 

为 所 有 这 些 操作 的 方法 名 称 都 是 一 样 的 , 所 以 我 们 只 能 通过 参数 列表 来 区 分 将 要 进行 的 操 
作 。 通 党 ， 这 种 差异 使 用 传人 的 第 一 个 字符 串 参 数 作为 判定 大 ,来 识别 要 执行 的 操作 。 

例如 ， 要 禁用 可 拖 动 元 率 的 可 拖 动 性 质 ， 可 以 编号 如 下 代码 : 


$s('.disableMe') .draggable('disable'); 
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注意 DODD000000000 jQuery UDO000000000000000000000 
draggableDisable()[|] draggableDestroy() 站 站 ODDODOD00D00D00D000000000 
D000000000000000U0U00UUU draggaple() )0D U0DD 


draggable() 方 法 各 种 形式 的 语法 如 下 所 示 。 


命令 语法 : draggable 


draggable (options) 

draggable('disable') 
draggable('enable') 
draggable('destroy') 


draggable('option', optionName, value) 
根据 指定 的 选项 使 包装 集中 的 元 素 可 拖 动 ， 或 者 基于 作为 第 一 个 参数 传 入 的 操作 字符 串 来 执 
行 其 他 的 可 拖 动 性 操作 


参数 

options ( 对象 ) 散 列 对 象 ， 由 要 应 用 到 包装 集 元 素 上 的 选项 ( 参见 表 10-1 所 述 ) 组 
成 ， 从 而 使 得 这 些 元 素 可 拖 动 。 如 果 省 略 〈 并 且 未 指定 任何 其 他 参数 ) 或 为 
空 ， 则 元 素 将 可 以 在 窗 体 内 任意 拖 动 

'disable' ( 字符 囊 ) 暂时 禁用 包装 集中 任何 可 拖 动 元 素 的 可 拖 动 性 。 并 不 删除 元 素 的 
可 拖 动 性 ， 可 以 通过 调用 这 个 方法 的 "enable' 变 体 来 恢复 元 素 的 可 拖 动 性 

enabjle ( 字符 事 ) 重新 启用 包装 集中 任何 可 拖 动 元 素 ( 它们 的 可 拖 动 性 已 经 被 禁用 
了 ) 的 可 拖 动 性 。 注 意 这 个 方法 不 会 向 任何 不 可 拖 动 的 元 素 添 加 可 拖 动 性 

'destory ( 字符 事 ) 删除 包装 集中 元 素 的 可 拖 动 性 

' option' (字符 串 ) 基于 剩余 的 参数 ， 设 置 包装 集中 所 有 元 素 的 选项 值 ， 或 者 获取 包 


装 集 中 第 一 个 元 素 ( 这 个 元 素 必 须 是 可 拖 动 的 元 素 ) 的 选项 值 。 如 果 指 定 这 
个 字符 串 作为 第 一 个 参数 ， 则 汉人 需要 提供 optionName 参数 

optionName (字符 事 ) 要 设置 或 返回 的 选项 名 称 的 值 (参见 表 10-1 )。 如 果 提 供 value 
参数 ， 则 这 个 值 就 成 为 选项 的 值 。 如 果 没 有 提供 value 参数 ， 则 返回 已 命名 
选项 的 值 

value ( 对象 ) 要 设置 的 选项 的 值 (通过 optionName 参数 标识 ) 

返回 值 

包装 集 ， 除 了 返回 选项 值 的 情况 





将 以 上 这 么 多 方法 的 变 体 都 封装 到 一 个 方法 中 。 下 面 首先 考察 如 何 使 元 素 可 拖 动 , 逐步 深入 
研究 这 个 部 件 。 
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10.1.1 使 元 素 可 拖 动 


查看 列表 中 draggable() 方 法 的 变 体 ， 我 们 可 能 会 期 望 通 过 调用 draggable ('enable ' ) 
方法 来 使 得 包装 集中 的 元 泰 可 拖 动 ， 但 这 绝对 是 大 错 特 错 | 

为 了 使 得 元 素 可 拖 动 ,需要 使 用 带 有 对 象 组 成 的 参数 ( 对 象 的 属性 指定 了 可 拖 动 性 选项 , 参 
见 表 10-1 ) 或 者 不 带 任 何 参 数 ( 使 用 所 有 的 默认 设置 ) 调用 araggable () 方 法 。 我 们 马上 就 会 
看 到 enable 调用 是 用 来 做 什么 的 。 

当 一 个 元 素 成 为 可 拖 动 元 素 时 , 类 ui-draggaple 就 会 被 添加 到 这 个 元 素 上 。 这 不 仅 有 助 于 
找 出 可 拖 动 的 元 素 ， 而 且 可 以 作为 使 用 CSS 应 用 视觉 样式 的 标识 物 ( 应 该 选择 这 么 做 ” )。 也 可 
以 标识 正在 被 拖 动 的 元 素 ， 因 为 在 拖 动 操 作 过 程 中 ， 人 会同 正 在 被 拖 劲 的 元 系 添 加 类 
ui-draggable-draggingo 

2 可 拖 动 性 选项 有 很 多 ， 因 此 为 了 帮助 熟悉 这 些 选 项 ， 我 们 提供 了 一 个 jQuery UI 可 拖 动 实验 
全 室 页面 。 在 学 习 本 节 其 余部 分 的 时 候 可 以 在 浏览 硕 中 打开 chapterl0/draggables/lab.draggbles.html 
页 面 。 这 个 页 面 的 显示 如 图 10-1 所 示 。 


800 
ly 




















jQuery UI Draggables Lab < 工 H 





包 祝 Gi 省 | 富 http://localhost/jqia2/chapter9/draggables/lab.draggables.html p Dr £- 


Wn - 
jQuery UI Draggables Lab 


区 


Draggable options 
axis: @none Ox Oy 
containment: @ none Odocument Oparent O window \ 
cursor: 回 none Ocrosshair OQ wait Ohelp distance: 
helper: @ unspecified Ooriginal O dlone grid: 
revert: @ unspecified Otrue Ofalse cursorAt: top 一 
scroll: @ unspecified Otrue O false 





opacity: (0.0 through 1.0) 


Apply | Disable | Enable | Reset | 


Executed command: 





L 








Position: -~- 
Offset: -~- 











图 10-1 可 拖 动 实验 室 页 面 会 帮助 我 们 熟悉 jQuery UI 中 可 拖 动 部 件 的 很 多 选项 





中 通过 jQuery UI 部 件 添加 到 元 素 上 的 类 名 来 和 元素 应 用 额外 的 样式 规则 是 推荐 的 做 法 。 
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draggable() 方 法 的 各 种 选项 提高 了 灵活 性 ， 让 我 们 可 以 精确 地 控制 拖 动 操作 是 如 何 发 生 
的 。 这 些 选 项 的 描述 如 表 10-1 所 述 。 可 拖 动 实验 室 页 面 中 展现 的 选项 在 表 10-1 中 通过 “是 否 在 
实验 室 中 ” 列 来 识别 。 在 学 习 过 程 中 请 务必 尝试 这 些 选 项 的 各 种 效果 。 
表 10-1 jQuery UI 的 daraggable() 方 法 的 选项 





选 项 摘 述 


addClasses (布尔 ) 如 果 指 定 为 false ， 则 阻止 癌 可 拖 动 元 素 添 加 类 
ui-draggable。 如 果 不 需 要 添加 此 类 并 且 页 面 上 有 很 多 需要 添加 可 
拖 动 性 的 元 素 ， 出 于 性 能 原因 我 们 可 能 会 将 该 选项 设置 为 false 
尽管 这 个 选项 是 用 复数 表示 的 名 称 , 但 是 它 不 会 阻止 问 元 素 添 加 其 
他 类 ， 例 如 不 会 阻止 在 拖 动 操作 时 问 元 素 添 加 的 ui-dqraggable- 


dragging 类 


appendTo (元 素 | 选 择 咒 ) 当 创 建 助 手 ( helper ) 时 (参见 下 面 的 helper 
选项 ) ， 指 定 将 助手 追加 到 的 DoM 元 素 。 如 果 未 指定 ， 则 任何 助手 都 
会 被 妃 加 到 可 拖 动 元 素 的 父 元 杂 中 
axis (字符 串 ) 如 果 指 定 为 x 或 y， 则 限制 拖 动 操 作 在 指定 的 坐标 轴 上 移 V 
动 。 例 如 ， 指 定 x 只 人 允许 元 素 在 水 平 坐标 轴 上 移动 。 如 果 未 指定 或 者 
指定 为 任何 其 他 值 ， 则 不 限制 移动 的 坐标 轴 
cancel (选择 需 ) 指定 一 个 选择 需 来 标识 不 允许 发 生 拖 动 操作 的 元 素 。 如 
果 未 指定 ， 则 使 用 选择 需 : input, option。 
注意 它 不 会 阻止 这 些 元 素 成 为 可 拖 动 的 元 素 , 它 只 会 阻止 这 些 元 系 
发 生 拖 动 操作 。 这 些 元 素 依 然 被 认为 是 可 拖 动 的 并 且 会 被 添加 
ui-draggable 类 
connectToSortable (字符 串 ) 标识 可 排序 列表 ， 以 便 将 可 拖 动 元 素 放置 到 列表 中 从 而 
使 其 成 为 列表 的 一 部 分 。 如 果 指 定 此 选项 ， 那 么 也 应 该 指定 helper 
选项 为 clone 
这 个 选项 需要 可 排序 部 件 的 支持 ， 我 们 会 在 10.3 市 介绍 这 个 部 件 
containment (元 率 | 选择 右 | 数组 | 字符 串 ) 定义 限制 拖 动 操作 的 区 域 。 如 有 果 未 指 v 
定 或 者 指定 为 aocument ， 则 在 文档 内 移动 范围 是 没有 限制 的 
字符 串 winaow 会 把 移动 限制 在 可 见 的 视窗 内 ， 而 字符 串 parent 
会 把 移动 限制 在 元 素 的 直接 父 元 系 内 
如 果 指 定 为 一 个 元 素 ， 或 者 用 来 识别 一 个 元 素 的 选择 需 ， 则 移动 会 
被 限制 在 这 个 元 系 内 
也 可 以 将 相对 于 文档 的 任意 矩形 区 域 指定 为 包含 4 个 数字 的 数组 ， 
按照 如 下 格式 来 指定 矩形 的 左上 角 和 右 下 角 坐 标 : [x1,y1,x2,y2] 
































CUrSor (字符 串 ) 在 拖 动 操作 中 使 用 的 鼠标 指针 光标 的 Css 名称。 如 果 未 指 Vv 
定 ， 则 默认 为 auto 

cursorAt ( 对 象 ) 指定 光标 在 被 拖 动 元 素 内 的 相对 位 置 (在 拖 动 操作 中 ) 。 Vv 
可 以 指定 为 包含 left 或 right 属 性 的 对 象 ， 或 者 指定 为 包含 top 或 
bottom 属 性 的 对 象 


例如 : 在 拖 动 过程 中 ，cursorAt:{top:5,left:5}) 会 把 光标 放 
置 在 距离 元 素 左上 角 5 个 像素 的 位 置 


如 有 果 示 指定， 光标 会 停留 在 单 击 元 系 的 位 置 
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( 续 ) 


、 上 ee 是 否 在 实验 室 
选 项 描 述 页 面 中 
delay (数字 ) 在 按 下 鼠标 事件 之 后 ,开始 拖 动 操作 之 前 延迟 的 毫秒 数 。 这 
可 以 防止 意外 的 拖 动 ， 只 有 在 用 户 保持 鼠标 按钮 处 于 按 下 状态 一 定时 
间 后 才 执 行 拖 动 操作 
默认 值 为 0， 表 示 没 有 定义 延迟 
distance ( 数字 ) 在 开始 拖 动 操 作 之 前 必须 拖 动 的 以 像素 为 单位 的 距离 。 v 
这 也 可 以 被 用 来 防止 意外 的 拖 动 。 如 果 未 指定 ， 则 距离 默认 为 1 个 
像 取 
drag ( 咕 数 ) 指定 在 可 拖 动 元 素 上 创建 的 函数 ， 用 来 作为 arag 事 件 的 事 
件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-2 
grid (数组 ) 包含 两 个 数字 的 数组 ， 分 别 用 来 指定 (在 一 个 拖 动 操作 中 ) v 
拖 动 操作 将 会 被 “吸附 ”到 的 水 平和 和 敢 直 距离 。 网 格 的 原点 是 被 拖 动 
元 率 的 初始 位 置 
如 果 未 指定 ， 则 不 定义 网 格 
handle (元素 | 选择 古 ) 指定 元 素 或 选择 元 素 的 选择 需 来 作为 拖 动 操作 的 触 
发 需 。 为 了 确保 正确 工作 ， 此 元 素 必 须 是 可 拖 动 元 素 的 子 元 素 
当 指 定 此 选项 时 ， 只 有 单 击 handle 指 定 的 元 素 才 会 发 生 拖 动 操作 。 
默认 情况 下 ， 单 击 可 拖 动 元 素 内 的 任意 位 置 都 会 发 后 拖 动 操作 
helper (字符 串 | 函数 ) 如 果 示 指定 或 者 指定 为 original， 则 在 拖 动 操作 V 
中 移动 可 拖 动 的 元 素 。 如 果 指 定 为 clone， 则 创建 一 个 可 拖 动 项 目的 
副本 ， 在 拖 动 操作 中 移动 这 个 副本 
可 以 指定 一 个 函数 ， 用 来 允许 我 们 创建 并 返回 一 个 作为 拖 动 助 手 的 



































新 DOM 元 素 
iframeFix (布尔 | 选择 需 ) 通过 阻止 <iframe> 元 素 捕捉 鼠标 移动 事件 来 防止 


此 元 素 干 涉 拖 动 操作 。 如 果 指 定 为 crue， 则 在 拖 动 操作 中 会 阻止 所 有 
iframe 元 素 的 鼠标 移动 事件 。 如 果 指 定 为 选择 侣 ， 则 会 阻止 该 选择 
圳 标识 的 上 所 有 iframe 元 素 的 鼠标 移动 事件 











opacity ( 数字 ) 一 个 0.0 ~ 1.0 之 间 的 数字 ， 指 定 被 拖 动 元 系 或 者 助手 的 不 透 V 
明度 。 如 果 省 略 ， 则 在 拖 动 过 程 中 不 改变 元 素 的 不 透明 度 
refreshPositions (布尔 ) 如 果 指 定 为 true， 则 会 在 拖 动 过 程 中 的 每 次 鼠标 移动 事件 








时 重新 计算 所 有 可 拖 动 元 每 的 位 置 ( 详 见 10.2 方 ) 。 因 为 它 的 性 能 
销 很 大 ， 所 以 最 好 只 在 高 度 动态 的 网 页 中 使 用 它 
revert (布尔 | 字符 串 ) 如 果 指 定 为 true, 则 被 拖 动 元 素 会 在 拖 动 操作 结 " 
时 恢复 到 它 的 初始 位 置 。 如 果 使 用 字符 串 invalid， 则 元 系 只 有 在 没 
有 被 放 和 人 到 可 放置 的 元 系 上 时 才 恢 复 到 初始 位 置 ; 如 果 指 定 为 valida， 
则 元 系 只 有 在 被 放 和 到 可 放置 的 元 素 上 时 才 恢 复 到 初始 位 置 
如 果 省 略 或 指定 为 false， 则 被 拖 动 元 系 不 会 恢复 到 它 的 初始 位 置 
































revertDuration (数字 ) 如 果 revert 为 true, 则 指定 被 拖 动 元 素 恢 复 到 它 的 初始 位 
置 的 训 秒 数 。 如 果 省 略 ， 则 使 用 默认 值 500 
scope (字符 串 ) 用 来 将 可 拖 动 元 泰和 可 放置 元 素 关 联 起 来 。 具有 和 可 放置 





元 素 相 同名 称 范 围 的 可 拖 动 元 素 将 目 动 被 可 放置 元 素 所 接受 。 如 采 未 
指定 ， 则 使 用 默认 范围 default 
( 当 讨 论 可 放置 部 件 时 这 个 选项 会 更 有 意义 。) 
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( 线 ) 
0 a 是 否 在 实验 室 
选 项 描 述 页 面 中 
scroll (布尔 ) 如 果 设 置 为 false， 则 在 拖 动 操作 中 阻止 容 硕 自动 滚动 。 vV 


如 果 和 省略 或 指定 为 tzue， 则 启用 自动 滚动 
scrollSensitivity (数字 ) 表示 光标 指针 距离 视窗 边界 的 距离 ( 以 像素 为 单位 ) 为 多 
少时 发 生 自动 滚屏 。 如 果 省 略 ， 则 默认 为 20 像 素 

















scrollSpeed ( 数字 ) 自动 滚动 的 滚动 速度 。 默 认 值 时 20。 较 低 该 值 用 来 减 慢 滚 
动 速度 ， 较 高 的 值 用 来 加 快 滚动 速度 
snap (选择 需 | 布 尔 ) 指定 用 来 标识 页 面 上 目标 元 系 的 选择 需 ,， 每 当 被 拖 


动 的 元 素 接 近 这 些 目 标 元 素 时 ,被 拖 动 的 元 素 就 会 “吸附 ”到 目标 元 
素 的 边界 。 指 定 为 true 是 选择 器 .ui-draggable 的 简写 形式 , 这 会 
使 所 有 其 他 的 可 拖 动 元 素 成 为 目标 元 素 

snapMode (字符 串 ) 指定 目标 元 素 的 哪个 边界 可 以 成 为 被 拖 动 元 素 的 吸附 对 
象 。 字 符 串 outez 指 定 只 有 目标 元 素 的 外 部 边界 才能 成 为 吸附 对 象 ， 
而 innez 指 定 只 有 目标 元 素 的 内 部 边界 才能 成 为 吸附 对 象 。 字 符 串 
botn (默认 值 ) 指定 目标 元 素 的 内 外 边界 都 能 成 为 吸附 对 象 












































snapTolerance ( 数字 ) 如 果 启 用 snap， 以 像素 为 单位 指定 发 生 吸 附 时 元 素 到 目标 
元 素 边界 的 距离 。 默 认 值 是 20 像 素 
Sogok” ( 对 象 ) 一 个 散 列 对 象 ， 用 来 控制 拖 动 操作 中 分 组 元 素 的 z-index 








苹 放 。 每 当 拖 动 元 紊 时 ， 这 个 元 素 就 成 为 了 分 组 中 所 有 其 他 可 拖 动 元 
素 中 层级 最 高 的 元 素 (通过 设置 z-index 的 值 )。 
也 可 以 通过 stack 对 象 的 min 属 性 来 指定 最 小 值 ，z-index 不 会 低 


























于 这 个 最 小 值 

start ( 函数 ) 指定 在 可 拖 动 元 素 上 创建 的 图 数 ， 用 来 作为 aragstatt 事 
件 的 事件 处 理 絮 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-2 

stop (函数 ) 指定 在 可 拖 动 元 素 上 创建 的 函数 , 用 来 作为 aragstop 事 件 
的 事件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-2 

ZzIndex (数字 ) 指定 拖 动 操作 中 可 拖 动 元 素 的 z-index 值 。 如 果 省 略 ， 则 


在 拖 动 操作 中 可 拖 动 元 素 的 z-index 值 不 会 改变 


所 有 这 些 选 项 为 如 何 进行 拖 动 操作 提供 了 很 大 的 灵活 性 。 但 是 还 没有 结束 。 可 拖 动 部 件 还 能 
灵活 地 控制 页 面 中 的 其 他 元 系 。 下 面 就 来 看 看 它 是 如 何 完成 的 。 


10.1.2 ”可 拖 动 性 事件 


在 表 10-1 中 , 可 以 看 到 有 三 个 选项 允许 我 们 在 可 拖 动 元 系 上 注册 事件 处 理 天 : drag、start 
和 stop。 这 些 选项 是 为 三 个 目 定 义 事件 绑 定 事件 处 理 融 的 便捷 方法 ，jQuery 会 在 拖 动 操作 的 各 
个 阶段 触发 这 些 事 件 : dragstart、drag 和 aqragstop (人 参见 表 10-2 )。 这 个 表格 ( 以 及 下 面 所 
有 描述 事件 的 表格 ) 显示 了 可 绑 定 自 定 义 事件 的 名 称 、 用 来 指定 处 理 器 困 数 的 选项 名 称 ， 以 及 对 
事件 的 描述 。 














GD 这 里 对 stack 的 解释 已 经 过 时 了 , 在 jQueryUI1.8.0 及 其 以 上 版 本 中 ，stack 是 一 个 选择 器 而 非 散 列 对 象 , 并 且 
min 也 变 成 了 局 部 变量 。 
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表 10-2 为 可 拖 动 部 件 触 发 的 jQuery Ul 事件 


事 件 选 项 描 述 
dragstart 站 全 让 当 拖 动 操 作 发 生 时 触发 
drag drag 在 拖 动 操作 中 为 鼠标 移动 事件 连续 触发 
dragstop stop 当 拖 动 操作 终止 时 触发 





可 以 在 可 拖 动 元 素 祖 先 层次 中 的 任何 元 素 上 创建 这 些 事件 的 处 理 融 , 以 便 在 这 些 事 件 发 生 时 
接收 通知 。 例 如 ， 我 们 可 能 希望 以 革 种 全 局 的 方式 来 啊 应 dragstart 事件 ， 可 以 在 文档 的 主体 
( body ) 上 创建 该 事件 的 处 理 需 : 


Ss('body') .bind('dragstart',function(event,info)t 
say ('What a drag!').; 
}); 


不 管 处 理 副 是 在 哪里 创建 的 ， 无 论 是 通过 选项 还 是 bina() 方 法 创建 的 ， 都 会 向 处 理 需 
传人 两 个 参数 : 一 个 鼠标 事件 实例 ， 一 个 包含 拖 动 事件 当前 状态 信息 的 对 象 。 后 者 的 属性 如 
下 所 示 。 

DD helper 




















包含 正在 被 拖 动 元 素 的 包 效 集 〈 要 么 是 原始 元 系 ， 要 么 是 原始 元 素 的 副本 )。 
D position 一 一 一 个 对 象 ， 其 top 和 left 属性 给 出 了 被 拖 动 元 素 相 对 于 偶 移 父 元 素 的 位 
置 。 对 于 dragstart 事件 来 说 该 属性 可 能 是 undefineqd。 
UD offset 一 个 对 象 ， 其 top 和 left 属性 给 出 了 被 拖 动 元 素 相 对 于 文档 页 面 的 位 置 。 
对 本 dragstart 事件 来 说 该 属性 可 能 是 undefined。 
可 拖 动 实验 室 页面 创 建 了 可 拖 动 事件 处 理 占 ， 并 且 使 用 传人 处 理 需 的 信息 在 Console 面板 中 
显示 被 拖 动 元 素 的 位 置 。 
一 旦 使 用 draggable() 方 法 的 第 一 种 形式 (传人 options 对 和 象 ) 来 让 元 素 成 为 可 拖 动 元 系 ， 
就 可 以 使 用 其 他 形式 来 控制 元 姆 的 可 拖 动 性 。 

















10.1.3 ”控制 可 拖 动 性 


我 们 在 前 一 节 介 绍 过 ， 可 以 调用 市 有 选项 散 列 值 的 daraggable () 方 法 来 为 包装 元 系 建 立 可 
拖 动 性 。 在 元 系 成 为 可 拖 动 元 系 后 ,我 们 有 时 可 能 想 要 暂时 荣 用 元 系 的 可 拖 动 性 , 但 又 不 想 丢 失 
创建 此 特效 时 的 所 有 选项 。 

可 以 通过 调用 draggable() 方 法 的 如 下 形式 来 暂时 禁用 元 系 的 可 拖 动 性 : 

$('.ui-draggable') .draggable('disable'); 

包 流 集中 任何 可 拖 动 的 元 条 部 将 暂时 变 成 不 可 拖 动 元 系 。 在 上 一 个 示例 中 , 我 们 禁用 了 页 面 
上 所 有 可 拖 动 元 系 的 可 拖 动 性 。 

为 了 恢复 这 类 元 素 的 可 拖 动 性 ， 可 以 使 用 如 下 语句 : 

$('.ui-draggable') .draggable('enable'); 


这 将 重新 局 用 任何 已 经 被 符 用 的 可 拖 动 元 素 的 可 拖 动 性 。 
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和 警告 DDD0DDD0D0D0D0DD draggable('enable D00000000000000000 
UUUU enableDDDDUDUDDDDDDDDDDDDDDDDDDDD 


如 果 想 要 永久 禁用 可 拖 动 的 元 条 可 拖 动 性 , 将 它们 恢复 到 可 拖 动 之 前 的 状态 , 那么 可 以 使 用 
下 面 这 个 语句 : 

$s('.ui-draggable') .draggable('destroy'); 

这 个 方法 的 destory 变 体会 从 元 素 上 删除 所 有 残余 的 可 拖 动 性 。 

具有 多 种 用 途 的 draggable() 方 法 的 最 后 一 种 格式 允许 我 们 在 可 拖 动 元 素 的 整个 生命 周期 
内 设置 或 者 获取 单个 选项 的 值 。 

例如 ， 在 可 拖 动 元 素 上 设置 revert 选项 ， 可 以 使 用 下 面 这 行 代 码 : 

$s('.whatever') .draggable('option','revert',true); 

这 将 会 设置 包 疼 集中 第 一 个 元 素 〈 这 个 元 系 必 须 是 可 拖 动 的 ) 的 revert 选项 为 true”。 厂 
在 不 可 拖 动 元 素 上 设置 选项 ， 则 不 会 产生 任何 作用 。 

如 采 硕 望 获取 可 拖 动 元 素 的 选项 ， 那 么 可 以 这 么 写 : 

Var value = $('.ui-draggable') .draggable('option', 'revert'); 

这 将 会 获取 包 净 集中 第 一 个 元 素 revert 选项 的 值 ， 前提 是 这 个 元 素 必 须 是 可 拖 动 的 ， 否则 
只 能 得 到 undefined。 

在 屏 医 上 到 处 拖 动 元 系 是 很 好 , 但 是 这 真 的 有 用 吗 ? 它 的 乐趣 或 许 会 持续 一 段 时 间 , 但 就 像 
玩 汐 溜 球 一 样 ， 只 能 风 麻 一 时 除非 我 们 是 狂热 爱好 者 ) 在 实际 应 用 中 ， 我 们 可 能 使 用 它 来 让 
用 户 在 屏幕 上 移动 模块 化 的 元 素 〈 如 采 做 得 好 的 话 ， 可 以 在 cookies 或 者 其 他 的 持久 化 机 制 中 记 
录用 户 选择 的 位 置 )， 或 者 用 在 游戏 、 猪 迹 游 戏 中 。 但 是 拖 动 操作 真正 的 内 交点 出 现在 放置 这 些 
拖 动 的 元 素 时 发 生 的 有 趣事 情 上 。 因 此 下 面 就 来 看 看 如 何 将 可 放置 元 素 与 可 拖 动 元 素 配 合 使 用 。 


10.2 ”放置 可 拖 动 元 素 


与 可 拖 动 元 素 相对 应 的 是 可 放置 元 素 一 一 即 可 以 接受 拖 动 元 素 的 元 素 , 并 在 接受 那些 可 拖 动 
元 素 时 完成 一 些 有 趣 的 事情 。 从 页 面 元 素 创 建 可 放置 项 目 和 创建 可 拖 动 元 素 类 似 。 事 实 上 还 会 更 
加 简单 ， 因 为 要 考虑 的 选项 更 少 。 

和 daraggable () 方 法 类 似 ，dqroppable() 方 法 也 有 几 种 形式 : 一 个 形式 用 来 初始 化 创建 可 
放置 的 元 素 ， 以 及 其 他 的 用 来 影响 创建 后 的 可 放置 元 素 。 它 的 语法 如 下 所 示 。 
























































(原文 描述 不 严谨 ( 容易 让 人 误 认 为 只 更 新 第 一 个 元 泰 的 选项 ), 事实 上 通过 'option' 方 法 来 设置 选项 时 ,会 同时 
更 新 包装 集中 所 有 元 素 的 这 个 选项 。 为 了 验证 此 说 法 ,请 在 可 拖 动 实验 室 页 面 执行 如 下 代码 : 
Ss('.module') .draggable(); 














Ss('.module') .draggable('option', 'revert', true);} 


然后 拖 动 页 面 中 Control Panel、Test Subject 和 Console 3 个 面板 ， 你 会 发 现 放 开 鼠 标 后 3 个 面板 都 能 回 到 其 原始 位 置 。 
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命令 语法 : droppable 


droppable (options) 

droppable('disable') 

droppable('enable') 

droppable('destroy') 

droppable('option', optionName, value) 

根据 指定 的 选项 使 包装 集中 的 元 素 可 放置 ， 或 者 基于 作为 第 一 个 参数 传 入 的 操作 字符 串 来 执 
行 其 他 的 可 放置 性 操作 


参数 

options ( 对象 ) 一 个 散 列 对 象 ， 由 要 应 用 到 包装 集 元 素 上 的 选项 组 成 (参见 表 
10-3 )， 从 而 使 得 这 些 元 素 可 放置 

'disable' (字符 串 ) 暂时 地 禁用 包装 集中 任何 可 放置 元 素 的 可 放置 性 。 并 不 删除 元 
素 的 可 放置 性 ,可 以 通过 调用 这 个 方法 的 'enable' 交 体 来 恢复 元 素 的 可 放 
置 性 

enabje' (字符 串 ) 重新 启用 包装 集中 任何 可 放置 元 素 ( 它们 的 可 放置 性 已 被 禁用 ) 
的 可 放置 性 。 注 意 这 个 方法 不 会 向 任何 不 可 放置 的 元 素 添 加 可 放置 性 

destroy' (字符 串 ) 删除 包装 集中 元 素 的 可 放置 性 

"BELom’ (字符 串 ) 基于 剩余 的 参数 ,设置 包装 集中 所 有 元 素 的 选项 值 ， 或 者 获取 


包装 集中 第 一 个 元 素 〈 必须 是 可 放置 元 素 ) 的 选项 值 。 如 果 指 定 这 个 字符 
串 作 为 第 一 个 参数 ， 则 至 少 需要 提供 optionName 参数 

optionName ( 字符 事 ) 要 设置 或 者 返回 的 选项 名 称 的 值 ( 参见 表 10-3 )。 如 果 提 供 value 
参数 ， 则 这 个 值 就 成 为 选项 的 值 。 如 果 没 有 提供 value 参数 ， 则 返回 已 命 
名 选项 的 值 

Value (对 象 ) 要 设置 的 选项 的 值 (通过 optionName 参数 来 标识 ) 


包装 集 ， 除 了 返回 选项 值 的 情况 








下 面 来 看 看 如 何 才能 使 元 素 成 为 可 放置 的 元 素 。 


10.2.1 使 元 素 可 放置 


要 使 元 系 成 为 可 放置 的 元 素 ， 只 需要 将 它们 收集 到 包装 集 ， 调 用 市 散 列 对 象 选 项 的 
droppable() 方 法 (或 者 不 带 任 何 参 数 ， 以 便 使 用 选项 的 默认 值 )。 当 元 素 成 为 可 放置 元 率 后 ， 
会 问 其 添加 ui-droppable 类 。 这 与 使 元 素 可 拖 动 的 方式 类 似 , 但 是 需要 的 选项 更 少 , 如 表 10-3 
所 示 。 
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A 与 可 拖 动 元 素 一 样 ， 我 们 也 提供 了 一 个 jQuery UI 可 放置 元 素 实 验 室 页 面 ( 如 图 10-2 所 示 )， 
用 来 实时 演示 大 部 分 可 放置 选项 。 





accry -ii 


[| UI Droppables Lab 
字符 家 http:/ /localhost/jqia2 /chapter9/droppables /lab.droppables.html bp DDB-£A- 






jQuery UI Droppables Lab 


Draggable options 
accept: 加 hower Mdog Mmotorcydle 加 water 
activeClass: 外 none OredBorder © blueBorder 加 greenBorder 
hoverClass: @ none OQ bronze O silver OQ gold 
tolerance: @ none QO intersect O pointer 外 人 Otouch 


[|_Apply jl Disable | Enable | Reset | 


Executed command: 


ACTIVATE 
OVER 
OUT 
DROP 
DEACTIVATE 








图 10-2 ”可 放置 实验 室 页 面 允 许 我 们 实时 观察 可 放置 元 素 的 选项 


在 chapter10/droppables/lab.droppables.html 找到 这 个 页 面 ， 并 在 浏览 锅 中 加 载 它 。 当 阅 旋 

表 10-3 的 选项 描述 时 ， 可 以 使 用 这 个 页 面 来 操作 可 放置 元 素 的 选项 。 10 
尽管 可 放置 元 系 与 可 拖 动 元 素 相 比 ， 其 选项 较 少 , 但 是 很 明显 ， 有 更 多 的 事件 和 状态 与 可 放 

置 元 系 相关 。 下 面 就 来 详细 考察 这 些 状态 和 事件 。 
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表 10-3 jQuery UI 的 aroppable() 方 法 的 选项 


、 是 否 在 实验 室 

先 项 二 术 定 

= 人 页 面 中 
accept ( 选择 如 | 因数 ) 指定 标识 可 拖 动 元 素 ( 这 些 元 系 将 被 放置 元 系 所 接受 ) Vv 











的 选择 需 , 或 者 用 来 第 选 页 面 上 所 有 可 拖 动 元 素 的 函数 ,为 所 有 可 拖 动 的 元 
率 调 用 此 孔 数 ， 并 将 该 元 素 引 用 作为 第 一 个 参数 传 入 此 函数 。 从 函数 返回 
true， 表 示 接 受 这 个 可 拖 动 元 素 为 放置 元 素 
如 果 省 略 ， 则 接受 所 有 的 可 拖 动 元 素 
actiyate ( 也 数 ) 指定 在 可 放置 元 素 上 创建 的 函数 ， 用 来 作为 dropactivate 事 件 V 
的 事件 处 理 需 , 这 个 事件 会 在 放置 操作 开始 时 触发 。 有关 这 个 事件 的 更 多 细 
广 ， 请 参见 表 10-4 
ctiveCldss (字符 串 ) 每 当 进 行 带 有 可 接受 元 素 的 拖 动 操作 时 ， 将 一 个 或 者 多 个 类 添 V 
加 到 可 放置 元 素 上 。 可 以 指定 多 个 的 类 名 ， 使 用 空格 符 来 分 割 它 们 
如 果 省 略 ， 则 在 可 接受 的 拖 动 操 作 中 不 会 添加 类 到 可 放置 的 元 素 上 
addClasses (布尔 ) 如 果 指 定 为 false, 则 阻止 问 可 放置 元 素 添 加 类 ui -droppable。 
如 果 不 需 要 添加 此 类 并 且 页 面 上 有 很 多 需要 添加 可 放置 性 的 元 素 ,出 于 性 能 
原因 ， 我 们 可 能 会 将 选项 设置 为 false 
deactivate ( 呆 数 ) 指定 在 可 放置 元 素 上 创建 的 函数 ， 用 来 作为 dropdeactivate v 
事件 的 事件 处 理 融 , 这 个 事件 会 在 放置 操作 终止 时 触发 。 有 关 这 个 事件 的 更 
多 细 市 ， 请 参见 表 10-4 



























































drop ( 浮 数 ) 指定 在 可 放置 元 素 上 创建 的 函数 , 用 来 作为 dqrop 事 件 的 事件 处 理 v 
器 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-4 

greedy (布尔 ) 可 放置 性 事件 通常 会 传播 到 骸 套 的 可 放置 元 素 上 。 如 果 设 置 这 个 
选项 为 true， 则 会 阻止 事件 传播 

hoverClass (字符 串 ) 每 当 可 接受 的 可 拖 动 元 素 在 可 放置 元 素 上 悬 停 时 ， 要 添加 到 可 Vv 


放置 元 素 的 一 个 或 多 个 类 名 。 可 以 指定 多 个 类 名 ,使 用 空格 符 来 分 割 它 们 。 
如 果 省 略 ， 则 在 可 接受 的 悬 俘 操作 中 不 会 添加 类 到 可 放置 的 元 素 上 
out ( 函数 ) 指定 在 可 放置 元 素 上 创建 的 函数 ， 用 来 作为 daropout 事 件 的 事件 V 
处 理 需 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-4 
over ( 函数 ) 指定 在 可 放置 元 泰 上 创建 的 函数 ， 用 来 作为 daropover 事 件 的 事 v 
件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-4 
soobe (字符 串 ) 用 来 将 可 拖 动 元 素 和 可 放置 元 素 关 联 起 来 。 具 有 和 可 放置 元 素 
相同 名 称 范围 的 可 拖 动 元 素 将 自动 被 可 放置 元 素 所 接受 。 如 果 未 指定 , 则 使 
用 默认 范围 default 
tolerance (字符 串 ) 控制 在 哪 种 情况 下 被 拖 动 元 素 是 悬 停 到 可 放置 元 素 上 的 。 它 的 V 
值 如 下 所 示 : 
UD fit 






































可 拖 动 元 素 必 须 完 全 位 于 可 放置 元 系 内 





UD pointer 鼠标 光标 必须 进入 可 放置 元 素 内 
UD touch 可 拖 动 元 厅 的 任意 部 分 必须 和 可 放置 元 厅 重 蔷 





口 intersect 至 少 有 50% 的 可 拖 动 元 素 必 须 和 可 放置 元 素 重 土 
口 如 果 省 略 ， 则 默认 使 用 intersect 





10.2.2 ”可 放置 性 事件 


跟 踩 拖 动 事件 的 状态 非常 傈 单 : 元 系 要 么 处 于 被 拖 动 状态 ， 要么 处 于 非 拖 动 状态 。 但 是 当 引 
入 可 放置 元 系 时 ， 事 件 束 会 变 得 有 点 复杂 。 不 仅 需要 考 碟 可 拖 动 元 系 ， 而 且 需要 考虑 可 拖 动 元 系 
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与 接受 它 的 可 放置 元 素 之 间 的 交互 。 
一 张 图 片 胜 过 干 言 万 语 ， 图 10-3 摘 述 了 在 拖 放 操 作 中 导致 操作 转换 的 状态 和 事件 。 









0 
可 拖 动 元 素 





@ 
放下 可 拖 动 元 素 











图 10-3 ”可 放置 元 素 经 历 的 状态 和 转变 取决 于 活动 的 可 拖 动 元 素 与 可 放置 元 素 在 拖 放 
操作 中 的 交互 


一 旦 创建 了 可 放置 元 素 ， 这 个 元 素 就 将 处 于 非 活动 状态 一 一 它 已 经 准备 好 接受 可 拖 动 元 素 
了 , 但 是 由 于 没有 执行 拖 动 操作 ， 因 此 所 有 一 切 都 在 静 廊 地 等 等 。 一旦 开始 拖 动 操作 ,事情 就 变 
得 有 趣 起 来 。 

@ 当 开 始 拖 动 某 个 能 被 可 放置 元 对 所 接受 的 可 拖 动 元 素 时 ( 查阅 accept 和 scope 选项 来 了 
解 哪些 元 素 是 可 接受 的 元 素 )， 就 会 触发 一 个 dropactivate 事件 上 且 可 放置 元 素 处 于 活动 状态 。 

为 dropactivate 创建 的 任何 处 理 器 都 将 依照 一 般 的 事件 传播 规则 触发 ， 除非 指定 greedy 
选项 为 true， 在 这 种 情况 下 只 调用 可 放置 元 素 上 的 处 理 和 俗 。 

此 时 ， 将 对 可 放置 元 素 应 用 任何 由 activeClass 提供 的 类 名 。 

@ 如 果 被 拖 动 的 元 素 移动 到 某 个 位 置 , 这 个 位 置 满足 可 放置 元 素 的 悬 停 条 件 ( 由 tolerance 
选项 指定 )， 束 会 触发 aropover 事件 〈 将 调用 相应 的 处 理 融 )， 并 且 可 放置 元 系 就 会 进入 悬 停 
状态 。 

任何 由 hoverclass 选项 提供 的 类 名 正 是 在 这 个 时 候 被 应 用 到 了 可 放置 元 系 上 。 

这 时 有 两 个 可 能 的 转变 : 释放 鼠标 按钮 来 终止 拖 动 操作 ， 或 者 继续 移动 可 拖 动 元 素 。 

@ 如 末 可 拖 动 元 素 被 移动 到 的 位 置 不 再 满足 可 放置 元 素 的 悬 依 条件 〈 依 然 是 通过 
tolerance 规则 来 判定 ), 就 会 触发 dropout 事件 ,并 且 从 可 放置 元 系 上 删除 任何 由 hoverclass 
指定 的 类 名 。 

此 时 可 放置 元 对 恢复 到 活动 状态 。 

@ 如 果 拖 动 操 作 在 活动 状态 时 终止 ， 就 会 触发 dropdeactivate 事件 ， 并 从 可 放置 元 条 上 
删除 任何 由 activeclass 指定 的 类 名 ， 可 放置 元 系 恢复 到 非 活 动 状 态 。 
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O 人 然而， 如 果 拖 动 操作 在 甚 停 状态 时 终止 ， 则 可 拖 动 元 双 就 被 认为 是 放置 到 了 可 放置 元 系 
上 ， 就 触发 两 个 事件 : drop 和 dropdeactivate。 
@ 可 放置 元 和 素 恢复 到 非 活 动 状 态 ， 并 从 可 放置 元 素 上 删除 任何 由 activeclass 指定 的 








一 一 


注意 “00”"00000000000000000 





表 10-4 概括 了 可 放置 元 系 的 事件 。 
表 10-4 ”为 可 放置 部 件 触发 的 jQuery Ul 事件 

















事 件 选 项 描 述 
dropactivate activate 当 开 始 拖 动 被 可 放置 元 素 所 接受 的 可 拖 动 元 素 时 触发 
dropdeactivate deactivate 正在 进行 的 放置 操作 终止 时 触发 
dropover Over 当 可 接受 的 可 拖 动 元 素 熙 停 在 可 放置 元 素 上 方 ( 由 可 放 阜 元素 的 
tolerance 选 项 所 定义 ) 时 触发 
dropout out 当 可 拖 动 元 素 移 出 可 放置 元 素 区 域 时 触发 
drop drop 当 拖 动 操 作 〈 在 可 拖 动 元 系 悬 俘 在 可 放置 元 系 的 时 候 ) 终止 时 触发 





所 有 的 可 放置 事件 处 理 需 都 接收 两 个 参数 : 一 个 鼠标 事件 实例 ,以 及 一 个 包含 拖 放 操 作 当 前 
状态 信息 的 对 象 。 这 个 对 象 的 属性 如 下 所 示 。 
口 nelper 一 一 包含 正在 被 拖 动 的 助手 元 素 的 包 效 集 ( 要 么 是 原始 元 了 要 么 是 原始 元 系 的 副本 )。 
包含 当前 可 拖 动 元 素 的 包 法 集 。 
一 个 对 象 ， 其 top 和 left 属性 给 出 了 被 拖 动 元 系 相 对 于 偏 移 父 元 系 的 位 
置 。 对 于 dragstart 事件 它 可 能 是 undefined。 
UD offset 一 个 对 象 ， 其 top 和 left 属性 给 出 了 被 拖 动 元 素 相 对 于 文档 页 面 的 位 置 。 
对 于 gragstart 事件 它 可 能 是 undefined。 
可 以 使 用 可 放置 元 系 实 验 室 来 确保 理解 这 些 事 件 和 状态 转换 。 和 其 他 实验 室 一 样 ，Control 
Panel 允许 我 们 指定 在 单 击 Apply 按钮 后 要 应 用 到 可 放置 元 又 上 的 选项 。Disable 和 Enable 按钮 分 
别 用 来 禁用 和 启用 可 放置 元 素 (使 用 droppable() 方 法 相应 的 变 体 )，Reset 按钮 用 来 将 表单 恢 
复 到 其 初始 状态 ， 并 销毁 实验 室 页 面 中 放置 目标 元 素 的 可 放置 能 
Test Subjects 面板 有 六 个 可 拖 动 元 素 ， 以 及 一 个 在 单 击 Apply 按钮 后 会 成 为 可 放置 目标 的 元 
又 (我们 称 为 Drop Zone )。 在 Drop Zone 下 面 是 灰色 的 文本 元 素 ， 写 着 Activate、Over、Out、 
Drop 以 及 Deactivate。 当 触发 相应 的 可 放置 事件 时 ， 对 应 的 文本 元 素 〈 我 们 称 之 为 事件 指示 器 ) 
会 暂时 高 腕 来 指示 被 触 发 的 事件 。( 你 明日 实验 室 是 如 何 实 现 这 个 效果 的 吗 ? ) 
A 下 面 就 使 用 这 个 实验 室 来 深入 探索 可 放置 部 件 。 
口 练习 1 一 一 在 这 个 练习 中 ， 先 从 熟悉 accept 选项 开始 ， 这 个 选项 用 来 说 明 可 放置 元 素 可 接 
受 的 可 拖 放 元 素 都 有 了 哪些。 尽管 可 以 将 这 个 选项 设置 为 任意 的 jQuery 选择 硕 〈 甚 至 是 一 
个 函数 ,来 通过 编程 做 出 合适 的 决定 )， 但 是 出 于 实验 室 的 目的 ， 我 们 将 关注 那些 拥有 特 

















UD draggable 





UD position 
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定 类 名 的 元 系 。 有 具体 说 来 ,我们 可 以 指定 包含 flower、dog、motorcycle 和 water 中 
任意 类 名 的 选择 器 ， 只 需要 选中 accept 选项 中 相应 的 复 选 框 控件 即 可 。 

Test Subjects 面板 左 侧 有 6 个 可 拖 动 图 片 元 系 ,每 个 元 素 都 分 配 了 一 个 或 两 个 类 名 ( 基 
于 图 片 显示 的 内 容 )。 例 如 ， 左 上 角 的 可 拖 动 元 素 拥 有 类 名 dog 和 flower ( 因为 图 片 中 
有 一 只 狗 和 一 些 鲜 花 )， 而 下 面 中 间 的 图 片 拥有 类 名 motorcycle 和 water (确切 地 讲 ， 
是 一 辆 雅马哈 V-Star 摩托 车 和 科罗拉多 河 )。 

在 单 击 Apply 之 前 ， 尝 试 将 这 些 元 双 拖 放 到 Drop Zone 上 。 除 了 可 以 拖 动 图 片 外 , 没 
有 发 后 什么 事情 。 仔 细 观 察 事件 指示 融 ， 注 意 它 们 也 没有 改变 。 这 是 意料 之 中 的 事情 ， 
因为 一 开始 页 面 上 并 不 存在 可 放置 元 素 。 

现在 ,请 保持 所 有 的 控件 处 于 初始 状态 ( 包括 选中 所 有 的 accept 复 选 框 ), 单 击 Apply 
按钮 。 执 行 的 命令 包含 一 个 accept 选项 ， 用 来 指定 匹配 所 有 4 个 类 名 的 选择 天。 

再 次 尝试 拖 动 任何 一 张 图片 到 Drop Zone， 同 时 注意 观察 事件 指示 需 。 这 一 次 ， 当 你 
开始 移动 任何 一 张 图 片 时 ， 将 看 到 Activate 指示 需 会 短暂 地 高 亮 显示 (或 者 说 是 脉动 )， 
表明 可 放置 元 素 已 经 注意 到 拖 动 操作 已 经 开始 〈 操 作 发 生 在 可 放置 元 素 所 接 有 党 的 可 拖 动 
元 系 上 )， 并 且 触 发 了 aropactivate 事件 。 

拖 动 图 片 来 回 进 出 Drop Zone。 相 应 的 aropover 和 dropout 事件 会 在 合适 的 时 间 点 被 
触发 (通过 相应 的 指示 化 显示 )。 现 在 ， 在 Drop Zone 的 外 部 区 域 放下 图 片 ， 观 察 Deactivate 
指示 需 的 脉动 效果 。 

最 后 ， 重 复 拖 动 操作 ,但 是 这 一 次 当 图 片 在 Drop Zone 上 方 时 放下 图 片 。Drop 指示 
妖 脉 动 (表明 触发 了 了 drop 事件 ), 另外 请 注意 , Drop Zone 会 显示 最 近 放 在 它 上 面 的 图 片 。 

口 练习 2 一 一 取消 选中 所 有 的 accept 复 选 枉 ， 单 击 Apply。 这 会 导致 accept 选项 包含 一 
个 空 字符 串 ， 不 会 严 配 任何 元 素 。 无 论 选 择 哪 张 图 片 ， 都 没有 回调 事件 指示 融 脉 动 ， 同 
时 当 你 把 一 张 图 片 在 Drop Zone 上 放下 时 也 不 会 有 任何 事情 发 生 。 没 有 一 个 有 效 的 
accept 选项 , Drop Zone 成 了 一 块 没 用 的 砖 涉 。( 注意 , 这 和 省 略 accept 选项 是 不 同 的 ， 
那样 会 使 得 所 有 的 元 泰成 为 可 接受 的 元 素 。) 

口 练习 3 一 一 只 选中 一 个 复 选 枉 ， 例 如 fower， 注 意 只 有 图 片上 有 花 东 的 网 片 (页面 知道 哪 
些 图 片上 有 人 花 和 泉 ， 因 为 有 花 朱 的 图 片 定义 有 flower 类 名 ) 才 被 认为 是 可 接受 的 元 又。 

再 次 尝试 任何 你 所 喜欢 的 可 接受 类 名 的 组 合 ， 见 悉 accept 选项 的 概念 。 

口 练习 4 一 一 重 置 所 有 控件 ,选中 activeclass 的 greenBorder 单 选 按钮 ,然后 单 击 Apply。 
这 会 为 可 放置 元 素 提 供 activeclass 选项 , 用 来 指定 一 个 定义 绿色 边框 的 类 名 【〈 你 应 该 
可 以 猜 到 )。 

现在 ， 当 你 开始 拖 动 一 个 被 可 放置 元 系 所 接 有 党 的 图 片 ( 由 accept 选项 定义 ) 时 ， 
Drop Zone 周围 的 黑色 边框 会 变 为 绿色 边框 。 

口 练习 5 一 一 重 置 实验 室 页 面 ,选中 标签 为 bronze 的 hoverclass 单 选 按钮 ,然后 单 击 Apply。 
当 拖 动 可 接受 图 片 到 Drop Zone 上 时 ，Drop Zone 改变 为 古铜色 。 

口 练习 6 一 一 在 这 个 练习 中 , 分 别 选 中 tolerance 单 选 按 钮 中 的 每 一 个 ,观察 这 个 设置 是 如 
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何 影响 可 放置 元 系 从 活动 到 悬 停 的 转变 的 〈 换 句 话 说， 就 是 什么 时 间 触 发 gropover 事件 
的 )。 这 个 转变 可 以 通过 设置 hoverClass 选项 或 者 通过 Over 事件 指示 需 的 脉动 来 观察 。 





提示 0000000000000000000000 CSS0000000000 
activeclass DUD CsSsDDD 
UD hoverclass UDUOUUOUMDUUUUUD i!imortant CSSUUUUUUUD 
UUUDUUDUD 





继续 在 实验 室 页 面 练习 , 确保 你 完全 了 解 拖 动 和 放置 操作 是 如 何 运 行 的 , 以 及 如 何 被 支持 的 
选项 所 影响 。 

一 旦 可 以 进行 拖 放 操 作 后 , 我 们 就 可 以 设计 出 整个 用 户 交 互 场景 : 使 用 拖 放 让 用 户 直 接 操 作 
页 面 元 素 这 种 实现 方式 即 简单 又 直观 。 这 些 交 互 中 ， 排 序 操作 也 是 一 种 无 处 不 在 的 应 用 ， 因 此 
jQuery UI 对 此 提供 了 下 接 的 文 持 。 


10.3 ”排序 


可 以 说 , 排序 是 使 用 拖 放 操作 最 有 用 的 交互 之 一 。 把 列表 中 的 项 目 按照 特定 顺序 排列 ， 甚 至 
在 列表 之 间 移 动 项 目 ， 这 在 蝎 面 应 用 中 是 一 个 相当 普遍 的 交互 技术 。 但 是 在 Web 上 ， 要 么 缺少 
这 种 技术 ， 要 么 使 用 <select> 元 素 和 按钮 的 组 合 来 模拟 这 种 技术 (在 列表 中 移动 项 目 ， 有 时 在 
多 个 选择 列表 之 间 移 动 项 目 )。 

尽管 这 种 组 合 控 件 并 不 可 怕 , 但 是 如 果 能 让 用 户 直 接 操作 元 素 岂 不 是 更 加 直观 。 拖 放 元 素 赋 
子 了 我 们 这 种 能 力 ， 而 jQuery UI 使 得 它 更 加 容易 使 用 。 

与 可 拖 动 和 可 放置 功能 一 样 , jQuery UI 还 通过 一 个 简单 的 多 用 途 sortable () 方 法 来 提供 排 
序 操作 ， 这 个 方法 的 语法 现在 看 起 来 应 该 很 熟悉 了 。 
































命令 语法 : sortable 
sortable (options) 
sortable('disable') 
sortable('enable') 
sortable('destroy') 
sortable('option', optionName, value) 
sortable('cancel') 
sortable('refresh') 
sortable('refreshPositions') 
sortable('serialize') 


sortable('toArray') 
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根据 指定 的 选项 使 包装 集中 的 元 素 可 排序 ， 或 基于 作为 第 一 个 参数 传 入 的 操作 字符 串 来 执行 
其 他 的 可 排序 性 操作 


参数 

options (对象 ) 一 个 散 列 对 象 ， 由 要 应 用 到 包装 集 元 素 上 的 选项 组 成 ( 参 
见 表 10-5 )， Pe 

disable (字符 串 ) 禁用 包装 集中 任何 可 排序 元 素 的 可 排序 性 。 并 不 删除 元 
素 的 可 排序 性 ， 可 以 通过 调用 这 个 方法 的 "enable' 变 体 来 恢复 元 
素 的 可 排序 性 

enable' (字符 串 ) 重新 启用 包装 集中 任何 可 排序 元 素 ( 它们 的 可 排序 性 已 
被 禁用 ) 的 可 排序 性 。 注意 这 个 方法 不 会 向 任何 不 可 排序 的 元 素 添 
加 可 排序 性 

‘destroy, (字符 串 ) 删除 包装 集中 元 素 的 ee 性 

‘options, (字符 串 ) 基于 剩余 的 参数 ,设置 包装 集中 所 有 元 素 的 选项 值 ， 或 者 
获取 包装 集中 第 一 个 元 素 ( 必须 是 可 排序 元 素 ) 的 选项 值 。 如 果 指 
定 这 个 字符 串 作 为 第 一 个 参数 ， 则 至 少 需要 提供 optionName 参数 

'Cancel' ( 字符 串 ) 取消 当前 的 排序 操作 。 这 个 方法 在 sortreceive 和 
sortstop 事件 的 处 理 器 中 非常 有 用 

‘efresl. (字符 串 ) 触发 可 排序 元 素 中 的 项 目 重 新 加 载 。 调用 这 个 方法 将 会 


导致 添加 到 可 排序 列表 中 的 新 项 目 被 识别 出 来 

'refreshPositions' (字符 串 ) 这 个 方法 主要 用 于 在 内 部 刷新 可 排序 元 素 的 缓存 信息 。 
小 用 会 削弱 排序 操作 的 性 能 ,因此 只 有 在 必要 的 时 候 才 使 用 这 个 方 
法 〈 用 来 解决 过 期 缓存 信息 产生 的 问题 ) 


'serialize' (字符 串 ) 从 可 排序 元 素 返 回 一 个 序列 化 的 查询 字符 事 (可 以 通过 
Ajax 来 提交 )。 我 们 很 快 就 会 更 详细 地 讨论 这 个 方法 
COArray ( 字符 事 ) 返回 由 可 排序 元 素 的 ia 值 组 成 的 数组 ( 按照 元 素 的 排 
列 顺序 ) 
optionName ( 字符 事 ) 要 设置 或 返回 的 选项 名 称 的 值 (参见 表 10-5 )。 如 果 提 


供 value 参数 ， 则 这 个 值 就 成 为 选项 的 值 。 如 果 没 有 提供 value 
参数 ， 则 返回 已 命名 选项 的 值 
Value (对象 ) 要 设置 的 选项 的 值 (通过 optionName 参数 标识 ) 
返回 值 
包装 集 ， 除 了 返回 选项 值 的 情况 





与 前 面 讲 过 的 交互 部 件 相 比 ，sortable() 方 法 的 变 体 增加 了 不 少 ,我 们 会 详细 考察 其 中 的 一 
些 变 体 ， 不 过 首先 来 看 看 如 何 使 得 元 系 可 排序 。 
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10.3.1 使 元 素 可 排序 


我 们 几乎 可 以 使 任何 一 组 子 元 素 成 为 可 排序 元 系 〈 通 过 辐 它 们 的 父 元 系 应 用 可 排序 性 )， 但 
是 我 们 通常 将 它 应 用 到 列表 上 (<ul> 或 <o1> 元 素 ), 以 便 它 的 <11> 子 元 素 可 以 来 回 移动 。 这 样 不 
仅 能 增强 语义 ， 而 且 可 以 优雅 地 将 可 排序 元 素 降 级 为 普通 的 列表 元 素 。 

另 一 方面 ， 如 果 应 用 程序 需要 ， OR ne 
我 们 在 表 10-5 中 考察 可 排序 性 选项 时 ， 将 会 看 到 如 何 做 到 这 一 点 。 

如 可 拖 动 和 可 放置 交互 元 素 一 样 ， 可 排序 性 也 是 通过 不 珊 参 数 ( 接受 默认 值 )， 或 者 市 一 个 
提供 非 默 认 值 选项 的 对 象 参 数 来 调用 sortable 方法 。 

oe jQuery UI 可 排序 实验 室 页 面 可 以 从 chapter10/sortableslab.sortables.html 找到 , 我 们 可 以 使 用 
这 个 页 面 来 实时 地 观察 可 排序 性 选项 的 操作 。 这 个 实验 室 页面 如 图 10-4 所 示 。 
ee 


和 可?QG@G 省 富 http://localhost/jaia2/chapter9/sortables/lab.sortables.html 


we jQuery UI Sortables Lab 今 
ContoliPare | 
Sortable options 
axis: @none OQx Oy 
containment: @none Odocument O parent O window 
cursor: @ none Ocrosshair Owait Ohelp 
helper: @ unspecified Ooriginal O clone grid: ”by 
revert: @ unspecified Otrue Ofalse opacity: | (0.0 through 1.0) 


: © 
scroll: @ unspecified Otrue Qfalse CORN Nh El Gorer Hat 
tolerance: @ none Qintersect O pointer Ofit OQtouch 


Apply _)\_Disable | Enable | Reset | 


Executed command: 





























cursorAt: top left 
distance: px 











图 10-4 可 排序 实验 室 可 以 回 列 表 应 用 各 种 可 排序 性 选项 
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这 没什么 奇怪 的 , 很 多 传人 可 排序 元 系 的 选项 只 是 传人 了 更 低层 级 的 拖 动 或 者 放置 操作 。 为 
了 节约 篇 幅 ， 就 不 再 重复 描述 这 些 选 项 了 ， 我 们 提供 了 描述 这 些 选 项 的 表格 作为 参考 。 
这 些 选项 中 的 大 部 分 都 是 不 言 目 明 的 ， 但 是 需要 重点 关注 connectwith 选项 。 





表 10-5 jQuery UI 的 sortable() 方 法 的 选项 































































































、 、、 是 否 在 实验 
选 项 描 述 室 页 面 中 

activate (函数 ) 指定 在 可 排序 元 素 上 创建 的 函数 ， 用 来 作为 sortactivate 
事件 的 事件 处 理 硕 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-6 

appendTo 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 ,追加 为 body 元 素 
的 子 元 素 可 以 解决 重 琶 和 z-index 的 相关 问题 

axis 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 。 通 常 ， 这 个 选项 V 
用 来 限定 可 排序 列表 的 移动 方向 (水平 或 垂直 ) 

beforeStop ( 函数 ) 指定 在 可 排序 元 素 上 创建 的 函数 ， 用 来 作为 sortbeforeStop 
事件 的 事件 处 理 硕 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-6 

cancel 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 

change (函数 ) 指定 在 可 排序 元 素 上 创建 的 函数 ， 用 来 作为 sortchange 事 
件 的 事件 处 理 硕 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-6 

connectWith (选择 需 ) 标识 男 一 个 可 排序 元 素 ， 该 元 杂 可 以 接受 当前 这 个 可 排序 Vv 
元 素 中 的 项 目 。 这 将 允许 把 元 素 从 一 个 列表 移动 到 另 一 个 列表 经 
常会 用 到 的 用 户 交 互 。 如 果 省 略 此 选项 ， 则 不 连接 其 他 元 素 

containment 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 v 

CUrsor 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 Vv 

cursorAt 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 Vv 

deactivate ( 函数 ) 指定 在 可 排序 元 隶 上 创建 的 函数 ， 用 来 作为 sortdeactivate 
事件 的 事件 处 理 硕 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-6 

delay 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 

distarice 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 Vv 

dropOnEmpty (布尔 ) 如 果 为 true (默认 值 ) ， 则 允许 从 这 个 可 排序 列表 拖 放 项 目 
到 连接 的 另 一 个 没有 项 目的 可 排序 列表 。 否 则 ， 不 允许 向 没有 项 目的 排 
序列 表 放 置 项 目 

forceHelperSize (布尔 ) 如 果 为 true， 则 强制 助手 具有 一 定 尺 寸 。 默 认为 false 

forcePlaceholderSize (布尔 ) 如 果 为 true， 则 强制 占 位 符 具 有 一 定 尺寸 。 默 认为 false 

es 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 V 

handle 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 

helper 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 

items (选择 需 ) 在 可 排序 元 素 的 上 下 文中 ， 提 供 识别 哪些 子 项 目 可 以 排序 
的 选择 厦 。 默 认 使 用 选择 右 >*， 它 允许 选择 所 有 的 子 项 目 来 排序 

opacity 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 V 

out ( 咕 数 ) 指定 在 可 排序 元 素 上 创建 的 函数 ， 用 来 作为 sortout 事 件 的 
事件 处 理 厦 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-6 

over ( 也 数 ) 指定 在 可 排序 元 素 上 创建 的 函数 ,用 来 作为 sortover 事 件 的 
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事件 处 理 希 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-6 
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( 线 ) 
, 六 a 是 否 在 实验 
placeholder (字符 串 ) 类 名 ， 应 用 到 可 能 未 定义 样式 的 占 位 符 空间 上 
receive (函数 ) 指定 在 可 排序 元 素 上 创建 的 函数 , 用 来 作为 sortreceive 事 
件 的 事件 处 理 硕 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-6 
remove (函数 ) 指定 在 可 排序 元 素 上 创建 的 函数 ， 用 来 作为 sortremove 事 件 的 
事件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-6 
revert 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 。 当 启用 这 个 特效 V 
时 ， 拖 动 助手 将 平滑 地 移 人 新 位 置 ， 而 不 是 快速 地 吸附 到 新 位 置 
scroll 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 Vv 
scrollSensitivity 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 
scrollSpeed 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 
sort ( 函数 ) 指定 在 可 排序 元 隶 上 创建 的 函数 ， 用 来 作为 sort 事 件 的 事件 
处 理 恬 。 有 关 这 个 事件 的 更 多 细 市 ， 请 参见 表 10-6 
start (本 数 ) 指定 在 可 排序 元 素 上 创建 的 函数 ， 用 来 作为 sortstart 事 件 
的 事件 处 理 颖 。 有 关 这 个 事件 的 更 多 细 市 ， 请 参见 表 10-6 
stop (函数 ) 指定 在 可 排序 元 素 上 创建 的 孔 数 , 用 来 作为 sortstop 事 件 的 
事件 处 理 右 。 有 关 这 个 事件 的 更 多 细 节 ， 请 参见 表 10-6 
tolerance 请 参见 表 10-3 中 具有 相同 名 称 的 可 放置 操作 的 选项 V 
update (函数 ) 指定 在 可 排序 元 素 上 创建 的 函数 ， 用 来 作为 sortupdate 事 
件 的 事件 处 理 磺 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-6 
zIndex 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 


10.3.2 ”连接 可 排序 元 素 


人 允许 用 户 对 单个 列表 中 的 元 系 进 行 排序 非常 有 用 , 这 是 显而易见 的 。 不 过 ,从 一 个 列表 回 夯 
一 个 列表 移动 项 目 也 是 一 个 稼 见 的 操作 。 这 个 功能 通常 是 由 两 个 多 选 列表 和 一 个 按钮 的 组 合 实现 
(把 选中 的 项 目 从 一 个 列表 移动 到 为 一 个 列表 ) 为 了 控制 每 个 列表 中 项 目的 顺序 或 许 需 要 更 多 的 
按钮 。 

通过 使 用 jQuery UI 的 可 排序 元 素 , 并 用 connectwitnh 选项 将 它们 连接 起 来 , 就 可 以 消除 这 
些 按 钮 ， 从 而 呈现 给 用 户 一 个 整洁 的 、 可 以 耻 接 操作 的 界面 。 试想 一 下 ， 也许 有 一 个 页 面 ， 用户 
可 以 设计 他 们 喜欢 的 报告 格式 。 报告 可 能 包含 很 多 数据 列 , 但 是 我 们 允许 用 户 指定 他 们 想 要 包含 
的 列 ， 以 及 这 些 列 显示 的 顺序 。 

可 以 在 列表 中 包含 所 有 可 能 的 列 ， 并 允许 用 户 从 列表 中 拖 动 他 们 逢 要 的 列 到 第 二 个 列表 中 ， 
第 二 个 列表 的 内 容 按照 报告 列 出 现 的 顺序 来 呈现 。 

用 来 创建 这 个 复杂 交互 的 代码 却 非 常 简单 ， 如 下 所 示 : 

$('#allPossibleColumns') .sortablelt{ 

connectWith: '#includedColumns,' 


}); 
$('#includedColumns') .sortable(); 
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在 可 排序 实验 室 页 面 ， 你 可 以 选中 标签 为 connectwith 的 复 选 框 ， 试 着 在 两 个 列表 之 间 拖 
动 元 系 。 

在 所 有 这 些 拖 动 和 放置 操作 中 ( 更 不 用 说 在 列表 内 或 列表 之 间 拖 动 元 素 )， 我 们 想 要 深入 了 
解 的 那些 事件 ， 以 及 在 排序 操作 中 到 压 发 生 了 什么 。 


10.3.3 ”可 排序 事件 


在 排 友 操作 中 有 很 多 移动 和 晃动 ,会 触发 拖 放 事 件 以 及 操作 DOM 元 系 
劲 可 排序 的 元 素 ， 也 为 了 处 理 可 能 已 经 定义 的 占 位 符 。 

如 果 我 们 所 关心 的 只 是 允许 用 户 对 列表 中 的 项 目 进 行 排 序 , 然后 再 获取 结果 ( 将 在 下 一 方 讨 
论 )， 那 么 就 不 需要 要 特别 关心 在 排序 过 程 中 发 生 的 所 有 事件 。 但 是 ， 与 可 拖 动 和 可 放置 元 系 一 
样 ， 如果 想 要 在 感 兴 趣 的 事件 发 生 时 执行 某 些 操作 ,那么 可 以 定义 处 理 带 函数 ,以 便 在 这 些 事件 
发 生 时 收 到 提醒 。 

在 其 他 交互 元 素 中 我 们 曾 看 到 过 ,可 以 通过 传人 sortable() 的 选项 来 当场 创建 这 些 处 理 需 ， 
也 可 以 使 用 binqa() 来 创建 这 些 处 理 硕 。 

传人 这 些 事 件 处 理 融 的 信息 壮 循 通用 的 交互 格式 ， 将 事件 作为 第 一 个 参数 ,将 目 定义 对 象 
(其 中 包含 感 兴趣 的 操作 信息 ) 作为 第 二 个 参数 。 对 于 可 排序 元 隶 ， 这 个 目 定 义 对 象 包含 如 下 
属性 。 


UD position 














不 仅 为 了 来 回 移 





























对 象 ， 其 top 和 Left 属性 给 出 了 被 拖 动 元 素 相 对 于 俩 移 父 元 系 的 位 置 。 











口 offset 一 一 对 象 ， 其 top 和 1left 属性 给 出 了 被 拖 动 元 系 相 对 于 文档 页 面 的 位 置 。 
口 nelper 一 一 包含 拖 动 助手 元 系 的 包装 集 ( 通 稍 是 一 个 副本 )。 
UD item 包含 排序 项 日 的 包装 集 。 








包含 占 位 符 ( 如 琳 存 在 的 话 ) 的 包产 集 。 


placeholder 











口 sender 一 一 当 连 接 操 作 在 两 个 可 排序 元 系 之 间 发 生 时 ， 用 来 指示 包含 发 起 连接 操作 的 可 
排序 元 系 的 包 冯 集 。 


注意 ， 如 果 这 些 属 性 在 一 些 状态 下 没有 意义 的 话 , 它们 的 值 可 能 是 ungdefined 或 null。 例 
如 ，sortstop 事件 没有 对 helper 的 定义 ， 因 为 此 时 拖 动 操作 已 经 停止 了 。 

这 些 处 理 各 的 消 数 上 下 文 是 应 用 了 sortable() 方 法 的 元 素 。 

在 排序 操作 中 触发 的 事件 列表 如 表 10-6 所 示 。 


表 10-6 为 可 排序 部 件 触 发 的 jQuery Ul 事件 

















事 件 选 项 描述 
sort sort 在 排序 操作 中 为 nousemove 事 件 重 复 触发 
sortactivate activate 当 排 序 操作 发 生 在 发 起 连接 的 可 排序 元 素 上 时 触发 
sortbeforestop beforeStop 在 排序 操作 将 要 结束 时 触发 ， 此 时 助手 和 占 位 符 元 素 的 引用 仍然 可 用 
sortchange change 在 排序 元 素 在 DOM 中 改变 位 置 时 触发 
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( 续 ) 
事 件 选 项 描 述 
sortdeactivate ” ”deactivate 当 连 接 的 排序 停止 时 触发 ， 并 将 此 事件 传播 到 相连 接 的 可 排序 列表 
Sortout out 当 排 序 项 目 移 出 连接 的 列表 时 触发 
sortover over 当 排 序 项 目 移入 到 连接 的 列表 时 触发 
sortreceive receive 当 连 接 的 列表 从 其 他 列表 接收 到 排序 项 目 时 触发 
sortremove remove 当 排 序 项 目 从 连接 的 列表 中 删除 并 被 拖 放 到 另 一 个 列表 时 触发 
Sortstart start 当 排 序 操作 开始 时 触发 
sortstop stop 当 排 序 操作 结束 后 触发 
sortupdate update 当 排 序 操作 停止 并 且 列 表 中 项 目的 位 置 发 生 改 变 时 触发 








注意 , 这些 事件 类 型 中 的 很 多 只 在 涉及 连接 的 列表 操作 时 才 会 触发 。 只 在 单个 列表 排序 操作 
中 触发 的 事件 比较 少 。 

sortupdate 事件 可 能 是 最 重要 的 ， 因 为 当 排 序 真 的 发 生 改 变 时 它 会 通知 我 们 。 如 果 一 个 排 
序 操作 发 生 了 但 是 没有 任何 改变 ， 则 这 种 情况 可 能 不 需要 关心 。 

当 sortupdate 事件 发 生 时 , 我 们 可 能 想 知 道 排 序 后 的 列表 顺序 。 下 面 就 来 介绍 如 何 得 到 这 


个 信息 。 

















10.3.4 ”获取 排 友 的 顺序 


当 我 们 想 知 道 可 排序 列表 中 的 顺序 时 ， 可 以 使 用 sortable() 方 法 的 两 个 变 体 ， 使 用 哪个 取 
决 于 需要 什么 类 型 的 数据 。 

sortable('toArray ') 方 法 返回 包含 排序 项 目 ia 值 的 JavaScript 数 组 (按照 项 目的 排列 顺 
序 )。 如 果 需 要 知道 项 目的 顺序 ， 可 以 使 用 这 个 方法 。 

另外 ， 如 果 想 要 将 此 信息 作为 新 请 求 的 一 部 分 来 提交 ， 甚 至 放 在 一 个 Ajax 请 求 中 ， 那 么 可 
以 使 用 sortable('serialize')， 它 会 返回 一 个 适合 作为 查询 字符 串 或 请 求 主体 的 字符 串 ， 其 
中 包含 排序 元 素 的 排列 信息 。 

使 用 这 个 变 体 需 要 为 可 排序 元 素 〈 这 个 元 素 是 将 要 被 排序 的 元 素 ， 而 不 是 可 排序 元 素 本 刁 ) 
的 ia 值 使 用 一 种 特别 的 格式 。 每 个 ia 需要 采用 prefix_number (前 级 数字 ) 的 格式 ， 其 中 前 
级 可 以 是 任意 字符 串 ( 只 要 所 有 被 排序 的 元 素 一 样 就 行 )， 紧 跟着 一 个 下 划 线 和 一 个 数字 值 。 当 
遵守 这 种 格式 时 , 序列 化 可 排序 元 素 的 结果 会 生成 一 个 查询 字符 串 ， 其 中 为 每 个 可 排序 元 素 包含 
一 个 项 目 , 项 目的 名 称 是 前 级 紧 跟 着 [] ， 项 目的 值 是 ia 值 尾部 的 数字 值 。 

困惑 了 ? 不 要 责怪 上 自己。 下 面 转 到 可 排序 实验 室 页 面 来 寻求 帮助 。 

实验 室 页 面 底部 的 控制 面板 (在 图 10-4 中 看 不 到 ， 因 为 它 超出 了 屏幕 显示 范围 ) 显示 了 在 
排序 操作 结束 后 (使 用 sortupdate 事件 处 理 圳 ) 调用 获取 方法 的 结果 。 分 配给 排序 元 素 的 id 
值 从 上 到 下 依次 是 subject_1 到 subject_6， 订 循 serialize 方法 定义 的 格式 规则 。 
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在 实验 室 中 ， 使 所 有 选项 处 于 默认 状态 ， 单 击 Apply， 点 住 栖 色 的 百合 花 图 片 〈ia 值 为 
subject_3 )， 并 拖 动 它 使 其 成 为 列表 中 的 第 一 项 。 在 控制 台面 板 ， 你 将 观察 到 ia 值 形 成 的 数组 
如 下 所 示 : 











['subject 3', 'subject 1', 'subject 2', 'subject 4', 'subject 5', 

'subject _6'] 
这 正 是 我 们 所 期 望 的 ， 显示 了 项 目的 新 顺序 ( 其 中 第 三 个 项 目 现在 位 于 第 一 个 位 置 )。 
序列 化 的 结果 如 下 : 


subject[]=3&subject[]=l&subject[]=2&subject[]=4&subject[]=5&subject[]=6 

这 说 明 前 级 ( subject ) 是 用 来 构成 查询 参数 的 名 称 ， 而 尾部 的 数字 值 将 成 为 参数 值 。( 顺 
便 提 一 下 ，[] 是 表示 “数组 ”的 常用 记号 ， 它 用 来 表明 有 多 个 同名 参数 。) 

如 果 这 种 格式 不 是 你 偏好 的 类 型 ， 那 么 可 以 使 用 ia 值 组 成 的 数组 为 基础 来 创建 自己 的 查询 
字符 串 ( 在 这 种 情况 下 $ .param() 会 相当 的 方便 )。 

作为 练习 ,请 回 到 第 5 章 有 关 “ 可 折 闭 模块 ”的 示例 ( 当时 我 们 只 关注 使 用 动画 的 方式 将 主 
体内 容 卷 人 到 标题 栏 中 )。 该 如 何 使 用 可 排序 元 素 让 用 户 在 多 个 列 中 管理 这 些 模块 (有 些 人 也 称 
之 为 门户 页 面 ) 的 位 置 ? 

在 可 排序 元 素 中 ,基本 的 拖 动 和 放置 交互 已 经 被 整合 在 一 起 , 以 便 提 供 更 高 级 别 的 交互 元 素 。 
下 面 就 来 看 看 jQuery UI 提供 的 另外 一 个 类 似 的 交互 元 素 。 


10.4 改变 元 素 的 尺寸 


在 第 3 章 ， 我 们 学 习 了 如 何 使 用 jQuery 的 方法 来 改变 DOM 元 素 的 尺寸 。 在 第 $ 章 ， 我 们 介 
绍 了 如 何以 动画 的 方式 来 完成 这 个 功能 。jQuery UI 也 人 允许 用 户 直接 改变 元 素 的 尺寸 。 

再 次 思考 可 折 闭 模块 示例 , 除了 人 允许 用 户 在 页 面 上 移动 那些 模块 ， 如 果 能 人 够 让 用 户 轻松 地 上 自 
定义 模块 的 尺寸 岂 不 是 更 好 ? 

目前 为 止 看 到 的 所 有 交互 元 素 ， 都 不 需要 在 页 面 上 包含 jQuery UI 下 载 包 中 生成 的 CSS 
文件 。 但 是 为 了 让 可 改变 尺寸 交互 元 素 正 常 运行 ， 就 必须 向 页 面 导 入 CSS 文件， 代码 如 下 
所 示 : 


<link rel="stylesheet" type="text/css" 
href="styles/ui-theme/jquery-ui-1.8.custom.css"> 


无 需 详 细 说 明 ， 使 用 resizable() 方 法 和 使 用 其 他 jQuery UI 交互 元 素 一 样 简 单 ， 它 的 语法 
模式 大 家 应 该 很 熟悉 了 。 

这 里 也 没有 什么 新 东西 (这些 交互 方法 模式 你 应 该 相当 熟悉 了 )， 因 此 下 面 就 来 看 看 创建 可 
改变 尺寸 元 素 时 可 用 的 选项 。 
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命令 语法 : resizable 


resizable (options) 

resizable('disable') 

resizable('enable') 

resizable('destroy') 

resizable('option', optionName, value) 

根据 指定 的 选项 使 包装 集中 的 元 素 可 改变 尺寸 ， 或 者 基于 作为 第 一 个 参数 传 入 的 操作 字符 串 
来 执行 其 他 的 可 改变 尺寸 的 操作 


参数 
options (对象 ) 一 个 散 列 对 象 ， 由 要 应 用 到 包装 集 元 素 上 的 选项 组 成 (参见 表 10-7 )， 


从 而 使 得 这 些 元 素 可 改变 尺寸 
'disable' (字符 串 ) 暂时 地 禁用 包装 集中 任何 可 改变 尺寸 元 素 的 可 改变 尺寸 性 。 J 
删除 元 素 的 可 改变 尺寸 性 ， 可 以 通过 调用 这 个 方法 的 'enable' 变 体 米 恢 


元 素 的 可 改变 尺寸 性 

人 (字符 串 ) 重新 启用 包装 集中 任何 可 政变 尺寸 元 素 ( 它们 的 可 改变 尺寸 性 已 
被 禁用 ) 的 可 改变 尺寸 性 。 注 意 ， 这 个 方法 不 会 向 任何 不 可 改变 尺寸 的 元 素 
添加 可 改变 尺寸 性 

'destroy (字符 串 ) 删除 包装 集中 元 素 的 可 改变 尺寸 性 

' Option, (字符 串 ) 基于 剩余 的 参数 ， 设 置 包装 集中 所 有 元 素 的 选项 值 ， 或 者 获取 包 


装 集中 第 一 个 元 素 ( 必须 是 可 改变 尺寸 的 元 素 ) 的 选项 值 。 如 果 指定 定 这 个 字 
符 串 作为 第 一 个 参数 ， 则 至 少 需要 提供 optionName 参数 

optionName (字符 串 ) 要 设置 或 返回 的 选项 名 称 的 值 (参见 表 10-7 )。 如 果 提 供 value 参 
数 ， 则 这 个 值 就 成 为 选项 的 值 。 如 果 没 有 提供 value 参数 ， 则 返回 已 命名 
选项 的 值 

Value (对象 ) 要 设置 的 选项 的 值 (通过 optionName 参数 来 标识 ) 

返回 值 

包装 集 ， 除 了 返回 选项 值 的 情况 


10.4.1 ”使 元 系 可 改变 尺 十 


一 种 选择 很 少 能 适合 所 有 的 情况 ， 因 此， 和 其 他 的 交互 方法 一 样 ，resizable() 方 法 也 提供 
了 很 多 选项 ， 可 用 来 和 目 定 义 各 种 所 需 的 交互 操作 。 
jQuery UI 可 改变 尺寸 实验 室 页 面 的 地 址 是 chapterl0/resizables/lab.resizables.html， 如 图 10-5 


全 所 示 。 
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BO 





| | jQuery in Action, 2nd Editio! x 1 [jQuery Ul Resizables Lab X TEA Eee 
和 只 合 让 http:/ /localhost/jqia2 /chapter9 /resizables /lab.resizables.html Ba 口 > 多 -~ 


We jQuery UI Resizables Lab 今 
Resizing options 
alsoResize: @ unspecifled O other test subject 
animate: (unspecified Otrue Ofalse 
animateDuration: (? unspecified | slow O normal O fast | milliseconds: 
aspectRatio: @ unspecified © false © true QO float: 
autoHide: @ unspecified Otrue Ofalse 
containment: @ none O document O parent O window 


ghost: @ unspecified Otrue Ofalse 
handies: On 日 ne Oe se Os Osw Ow Onw 


minHeight: minWidth: maxHeight: 


| Apply ]| Disable | Enable | Reset 3 


Executed command: 














图 10-5 可 改变 尺寸 实验 室 可 以 让 我 们 实时 观察 各 种 可 改变 尺寸 选项 的 操作 10 


这 个 实验 室 的 Control Panel 可 以 尝试 resizable () 方 法 大 部 分 选项 。 当 你 在 阅读 表 10-7 中 
的 选项 列表 时 可 以 在 这 个 实验 室 中 进行 操作 。 
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与 一 些 更 加 复杂 的 交互 元 素 相 比 ，resizable() 元 素 的 选项 集 很 小 。 其 实 它 的 事件 也 很 少 ， 
后 面 将 会 介绍 。 


表 10-7 jQuery UI 的 resizable() 方 法 的 选项 





| 是 否 在 实验 
; 先 项 + 术 人 下 
选 也 室 页 面 中 
alsoResize (选择 需 jQuery| 元 系 ) 指定 与 可 改变 尺寸 的 元 素 同 步 改 变 尺寸 的 其 他 DOM Vv 





元 素 。 不 需要 问 这 些 DOM 元 素 应 用 resizable() 方 法 。 如 果 省 略 ， 则 没有 
任何 其 他 的 元 素 会 受到 影响 


animate (布尔 ) 如 果 为 true， 在 拖 动 操作 结束 之 前 ， 元 素 本 续 不 会 改变 尺寸 ， 操 v 

作 结 束 后 ， 元 素 会 使 用 动画 的 方式 平滑 地 改变 尺寸 。 在 拖 动 过 程 中 ， 将 使 用 
带 有 类 ui-resizable-helper (除非 通过 helper 选 项 来 覆盖 ， 下 面 会 讨 
论 ) 的 助手 显示 拖 动 的 轮廓 。 确 保 这 个 类 拥有 合适 的 CSS 定 义 ， 否则 在 以 动 
画 方 式 改 变 尺寸 的 操作 中 你 可 能 看 不 到 任何 效果 

例如 ， 可 改变 尺寸 实验 室 页 面 使 用 如 下 定义 : 

.ui-resizable-helper { 

border: lpx solid #82bf5a; 
} 


团 认 情况 下， 操作 不 之 动画 效果 












































animateDuration ( 整数 | 字符 串 ) 如 果 启 用 animate 选 项 ， 定 义 动画 的 持续 时 间 。 可 以 使 用 v 
标准 的 动画 字符 串 slow、normal1 或 East， 或 者 以 训 秒 数 指定 的 数字 值 

anirmateEasing (字符 串 ) 如 果 局 用 animate 选 项 , 指定 使 用 的 绥 动 特效 。 默 认 值 是 内 置 的 
swing 绥 动 特效 。 请 参阅 第 $ 昔 中 有 关 绥 动 特效 的 讨论 

aspectRatio ( 布尔 | 浮 点 数 指定 是 否 或 以 什么 比例 来 在 改变 尺寸 操作 中 保持 元 条 的 长 宽 V 
比 。 值 为 true 会 强制 使 用 元 系 的 原始 长 宽 比 ， 而 浮 点 值 可 以 用 来 指定 公式 
width/height 计 算 的 比例 。 例 如 ，3/4 的 比例 可 以 指定 为 0.75 

默认 情况 下 ， 在 操作 中 不 会 保持 元 素 的 长 宽 比 

autoHmide (布尔 ) 如 果 为 true， 则 手柄 是 隐藏 的 ， 只 有 当 鼠 标 悬 停 在 可 改变 尺寸 元 V 
素 上 方 时 才 显 示 手 柄 。 人 参见 handles 选 项 以 了 解 更 多 信息 。 默 认 情 况 下 ， 总 
是 显示 手柄 

cancel (选择 天 ) 指定 排除 在 可 改变 尺寸 操作 之 外 的 元 素 。 上 默认 情况 下 ,使 用 选择 
"nout, ontion" 

containment (字符 串 | 元 素 | 选 择 希 ) 定义 一 个 限制 改变 尺寸 操作 的 区 域 。 可 以 指定 为 内 
置 的 字符 串 parent 或 aocument ， 可 以 提供 一 个 特别 的 元 素 ， 也 可 以 使 用 选 
择 需 来 获取 容 需 元 素 。 默 认 情 况 下 ， 不 限制 改变 尺寸 操作 

delay 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 

Qistance 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 

ghost (布尔 ) 如 果 为 true， 在 改变 尺寸 操作 中 显示 一 个 半 透 明 的 助手 元 素 。 默 Vv 
认 值 为 false 

grid 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 
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( 续 ) 
本 人 是 否 在 实验 
选 项 描 述 室 页 面 中 
handles (字符 串 | 对 象 ) 指定 元 素 可 以 在 哪些 方向 上 改变 尺寸 。 可 以 指定 为 用 去 号 分 V 
隅 的 列表 字符 串 ， 可 能 的 值 有 : n、ne、e、se、s、sw、w、nw 或 a11。 如 
果 想 要 jQuery UI 来 处 理 创建 手柄 的 过 程 ， 可 以 使 用 这 种 格式 
如 果 你 想 要 使 用 可 改变 尺寸 元 素 的 子 元 素 作 为 手柄 的 话 ， 可 以 提供 一 个 对 
象 ， 其 属性 为 能 为 八 个 方 回 分 别 定义 手柄 : n、ne、e、se、s、sw、w 和 nw。 
属性 的 值 应 该 是 选择 硕 〈 用 来 定义 作为 手柄 的 元 素 ) 
我 们 将 在 讨论 事件 后 更 进一步 了 解 这 个 手柄 选项 
如 果 省 略 ， 则 为 e、se 和 s 三 个 方向 创建 手柄 
helper (字符 串 ) 如 果 指 定 此 选项 , 则 在 改变 尺寸 的 操作 中 局 用 带 有 提供 的 类 名 的 
助手 元 兹 。 可 以 使 用 这 个 选项 来 启用 助手 ， 也 可 以 通过 其 他 选项 例如 ghost 
或 animate 来 隐 式 地 局 用 助手 。 如 果 隐 式 地 启用 助手 ， 则 默认 类 名 为 
ui-resizable-helper， 除 非 使 用 这 个 选项 来 覆盖 类 名 
maxHeight (整数 ) 指定 元 素 的 尺寸 可 以 调整 到 的 最 大 高 度 。 默 认 情 况 下 ， 不 设置 最 V 
大 值 
maxWidth (整数 ) 指定 元 素 的 尺寸 可 以 调整 到 的 最 大 宽度 。 默 认 情 部 下 ， 不 设置 最 V 
大 值 
minHeight (整数 ) 指定 元 系 的 尺寸 可 以 调整 到 的 最 小 高 度 。 默 认 人 情况 下 是 10 个 像素 V 
minWidth (整数 ) 指定 元 素 的 尺寸 可 以 调整 到 的 最 小 宽度 。 默 认 情 况 下 是 10 个 像素 V 
resize ( 浮 数 ) 指定 在 可 改变 尺寸 元 素 上 创建 的 函数 ， 用 来 作为 resize 事 件 的 事 V 
件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-8 
start ( 浮 数 ) 指定 在 可 改变 尺寸 元 素 上 创建 的 函数 ， 用 来 作为 resizestart 事 V 
件 的 事件 处 理 硕 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-8 
stop (函数 ) 指定 在 可 改变 尺寸 元 素 上 创建 的 函数 , 用 来 作为 resizestop 事 件 V 





的 事件 处 理 各 。 有 关 这 个 事件 的 更 多 细 市 ， 请 参见 表 10-8 


10.4.2 ”可 改变 尺寸 事件 


只 有 3 个 简单 的 事件 会 在 改变 玉 寸 操作 中 触发 ， 分别 表 示 改 变 玉 寸 操作 已 经 开始 、 进 行 中 ， 
以 及 已 经 结束 。 

传人 这 些 处 理 角 的 信息 还 循 通用 的 交互 格式 ,将 事件 作为 第 一 个 参数 ,将 一 个 目 定 义 对 象 ( 其 
中 包含 我 们 感 兴趣 的 操作 信息 ) 作为 第 二 个 参数 。 对 于 可 改变 尺寸 元 条 ,这 个 自 定 义 对 和 象 包含 如 
下 属性 。 


DD Position 

















一 个 对 象 ， 其 top 和 Left 属性 给 出 了 元 素 相 对 于 它 偏 移 父 元 素 的 位 置 。 
一 个 对 象 ， 其 wiath 和 heignt 属性 给 出 了 元 素 的 当前 尺寸 。 
一 个 对 象 , 其 top 和 left 属性 给 出 了 元 素 相对 于 它 偏 移 父 元 素 





UD size 








DD originalPosition 





的 原始 位 置 。 
originalSize 一 个 对 象 ， 其 width 和 height 属性 给 出 了 了 元素 的 原始 尺寸 。 





口 nelper 一 一 包含 所 有 助手 元 条 的 包装 集 。 


图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 





304 第 10 章 jQuery UI 和 鼠标 交互 : 跟随 鼠标 的 移动 


注意 ， 如 果 这 些 属性 在 一 些 状态 下 没有 意义 的 话 ， 则 它们 的 值 可 能 是 undefined 或 null。 
例如 ， 可 能 没有 定义 helper”。 

这 些 处 理 器 的 函数 上 下 文 是 应 用 resizable() 方 法 的 元 素 。 在 改变 尺寸 操作 中 触发 的 事件 
如 表 10-8 所 示 。 


表 10-8 为 可 改变 尺寸 元 素 触发 的 jQuery Ul 事件 


事 件 选 项 描述 
resizestart start 操作 开始 时 触发 
resize resize 在 操作 中 为 nousemove 事 件 重复 ”触发 
regiaestop stop 当 操作 结束 时 触发 


可 改变 尺寸 实验 室 使 用 这 些 事件 来 在 页 面 的 Console 面板 中 报告 测试 对 象 元 素 的 当前 位 置 和 
on 


10.4.3 ”为 手 栅 添 加 样式 


虽然 resizable() 是 一 个 相当 简单 的 操作 ， 但 是 至 少 就 jQuery UI 交互 部 件 而 言 ， 还 需要 对 
手柄 进行 一 些 特别 的 讨论 。 

默认 情况 下 ， 可 改变 尺 二 部 件 会 为 东 、 东 南 以 及 南 三 个 方向 创建 手柄 ， 并 局 用 这 些 方 回 的 可 
改变 尺寸 功能 。 没 有 定义 改变 尺寸 手柄 的 方向 不 能 进行 改变 尺寸 操作 。 

最 初 你 可 能 会 迷惑 ,在 页 面 和 可 改变 尺寸 实验 室 页 面 中 ,无 论 启 用 多 少 个 方 回 ， 只 有 东南 角 
会 出 现 一 个 “把 手 ” 图 标 。 然而 ,当局 用 除 东 南 角 外 的 所 有 其 他 指定 的 方 回 时 , 它们 工作 得 很 好 ， 
并 且 当 鼠标 悬 集 在 可 改变 尺寸 的 边界 时 会 改变 光标 的 形状 。 为 什么 会 出 现 这 种 差异 呢 ? 

这 不 是 你 所 能 控制 的 代码 。jQuery UI 把 那个 角落 视 为 一 种 特殊 情况 ， 除 了 将 东南 方 回 的 手 
柄 和 其 他 方向 的 手柄 做 同样 处 理 外 ， 还 向 其 添加 了 额外 的 类 名 。 

当 创 建 手柄 时 ， 都 会 回 其 添加 类 名 ui-resizable-handle 和 ui-resizable-xx， 其 
中 xx 代表 手柄 所 呈现 的 方向 (例如 ,ui-resizable-n 表示 东边 的 手柄 ), 东南 角 被 jQuery UI 
视 为 特殊 情况 , 也 接受 类 名 ui-icon 和 ui-icon-gripsmalL-diagonal-se( 在 下 和 载 jQuery 
UI 过 程 中 由 默认 的 CSS 文件 生成 )， 用 来 创建 显示 在 角 沙 的 “手柄 ”图 标 。 尽 管 你 可 以 操作 手 
柄 名 称 的 CSS 来 影响 所 有 的 手柄 (包括 东南 角 的 手柄 ) 的 显示 方式 , 但 是 没有 选项 可 以 用 来 改 



































中 原文 错误 ,传人 resizable 事件 处 理 融 第 二 参数 的 helper 属性 在 任何 情况 下 都 不 可 能 为 null 或 undefined， 
可 以 在 实验 室 页 面 通过 执行 如 下 代码 来 验证 : 


$s('.testSubject') .resizablel(t 








start: function(event, ui) { console.log(ui.helper); }, 
resize: function(event, ui) { console.log(ui.helper); }, 
stop: function(event, ui) { console.log(ui.helper); } 
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变 类 名 的 分 配 行为 ”。 


注意 D000000000000“00m"*00000000000 MacoSXxUDODOOOOD 
UUDOUDO00O0UU0UU0UUUUUUUUUD 


图 10-6 显 示 了 这 个 “把 手 ” 手柄 , 以 及 当 鼠 标 悬 停 在 可 改变 斥 才 的 东部 边界 附近 时 显示 的 CSS 
手柄 。 





图 10-6 默认 情况 下 ，jQuery UI 在 东南 角 放 置 一 个 “把 手 ” 手 柄 ， 并 为 其 他 手柄 使 用 
CSS 指针 


如 果 你 党 得 这 种 方式 的 限制 太 多 的 话 ， 那 么 可 以 使 用 handles 选项 更 加 复杂 的 版 本 来 定义 
作为 手柄 的 子 元 素 〈 可 以 目 己 创建 这 些 元 素 )。 
接 下 来 看 看 jQuery UI 提供 的 最 后 一 个 交互 部 件 。 








10.5 ”使 元 素 可 选择 


目前 所 人 研究 的 大 部 分 交互 元 又 痢 涉及 对 元 和 又 的 直接 操作 ， 目 的 是 以 某 种 方式 改变 元 又 的 状 
态 ， 从 而 有 影响 它们 在 DOM 中 的 位 置 、 大 小 和 顺序 。selectable() 区 互 元 系 能 够 设置 和 清空 任 
何 DOM 元 素 的 “选中 ”状态 。 








中 指 的 是 可 改变 尺寸 部 件 会 自动 向 东南 角 的 元 素 添 加 ui-icon 和 ingcigsnall-alaodeonial=-se 页 小 从 名 .， 
这 是 无 法 禁用 的 默认 行为 。 
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在 HTML 表单 控件 中 ， 我们 经 常 使 用 类 似 复 选 框 、 单 选 按 钮 和 和 <select> 元 素来 保持 选中 的 
状态 。jQuery UI 允许 我 们 在 元 率 上 保持 这 种 状态 而 不 是 借助 于 这 些 控件 。 

回想 一 下 第 4 章 介 绍 的 DVD Ambassador 示例 。 在 该 示例 中 ， 我 们 专注 于 儿 选 控件 集 ， 而 没 
有 特别 留意 从 吧 选 操作 返回 的 结果 。 我 们 将 做 出 改变 。 作为 提示 , 这 个 示例 的 截图 如 图 10-7 所 示 。 


e000 


DVD Ambassador — Disc lo x Wo 








《人 IC 省 http:/ /localhost/jqia2 /chapter4 /dvds/dvds.html p Dr A- 


Hm WR 


a MA RI pi 


DVD Ambassador 


Disc Locator 


(Xx)| DvDTite | contains E> 


( Add Filter ) ( Apply Filters ) 


Communion 
Creature from the Black Lagoon 





Fahrenheit 451 


-ee re 全、 世上 有 前 时 = 一 二 on EW ~ 
Te Te 吊 | SEAN CONNERY OO 


图 10-7 再 次 访问 DVD Ambassador 示例 ， 并 使 用 jQuery UI 可 选择 部 件 来 设置 结果 数据 集 


结果 以 表格 的 形式 显示 在 页 面 上 的 元 系列 表 中 (在 这 个 示例 中 , 结果 是 一 个 便 编 码 的 HTML 
片段 ， 在 真实 的 应 用 中 结果 将 会 从 数据 库 信息 中 生成 )。 

比方 说 ， 我 们 想 允 许 DVD Ambassador 的 用 户 选 择 一 个 或 多 个 DVD 标题 并 回 其 应 用 某 些 批 
量 操作 : 例如 从 数据 库 删除 它们 ， 或 者 将 它们 标记 为 已 读 或 未 读 。 

传统 的 方式 可 能 是 为 每 一 行 添 加 一 个 复 选 框 控 件 , 并 用 它 来 指示 是 否 选中 该 行 。 这 种 方法 经 
证 明 是 可 以 工作 的 ,但 是 因为 复 选 框 的 区 域 非常 小 ， 通 和 常 是 12 像素 x 12 像素 ， 用 户 必 须 单 击 这 
个 区 域 来 切换 选中 状态 ， 那 些 笨 拙 的 单 击 者 一 定 会 叫 匣 不迭。 






Te \ 
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注意 DDDD00<label>00000000000000000000000000000 
UD0 
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用 户 界 面 不 应 该 成 为 训练 手 和 眼睛 协调 性 的 游戏 , 我 们 想 让 用 户 更 加 容易 地 操作 页 面 。 我 们 
拥有 为 整 行 设置 单 击 处 理 带 的 记 和 加 , 这样 用 户 单 击 行 的 任意 地 方 时 , 处 理 带 都 可 以 找 出 内 部 的 复 
选 框 并 切换 它 的 值 。 这 为 用 户 提 供 了 更 大 的 单 击 目标 , 而 复 选 框 仪 仪 是 作为 视觉 提示 以 及 记 住 选 
中 状态 的 手段 。 

jQuery UI 的 可 选择 部 件 将 这 个 功能 发 扬 光 大 ， 它 有 两 个 特别 的 优点 : 

口 可 以 剔除 复 选 框 ; 

口 用 户 可 以 通过 单个 交互 进行 批量 选择 。 

别 除 复 选 框 意 味 着 需要 对 可 选择 的 行 (没有 了 复 选 框 ， 用户 就 不 知道 哪些 行 可 以 选择 ,我 们 
必须 弥补 这 个 缺陷 ) 和 行 的 选中 状态 提供 目 己 的 视觉 提示 。 当 单 击 某 一 行 时 ， 通 过 改变 行 的 背景 
色 来 指示 状态 的 变化 是 一 种 约定 俗 成 的 手段 , 同时 通过 改变 光标 来 指示 某 些 有 趣 的 事情 将 要 发 生 
也 不 失 为 一 个 好 主意 。 

至 于 记 住 选中 了 哪些 行 ， 没有 选中 哪些 行 ，jQuery UI 可 选择 部 件 会 为 选中 的 元 素 添 加 一 个 
类 名 ( 名 为 ui-selected ) 来 维持 选中 的 状态 。 

使 用 复 选 框 的 方法 ,用户 只 能 通过 逐 行 单 点 复 选 框 来 选择 或 反选 元 素 。 尺 管 通常 会 提供 一 个 
复 选 框 来 切换 所 有 复 选 框 的 状态 , 但 是 如 果 用 户 想 选择 第 3 行 到 第 7 行 , 该 怎么 办 ?他 们 只 能 被 
迫 一 行 一 行 地 单 击 复 选 框 。 

使 用 可 选择 部 件 , 我 们 不 仅 可 以 通过 单 击 来 单 选 ,而 且 可 以 通过 路 元 素 拖 出 一 个 矩形 选取 框 
(或 者 拖 出 一 个 包含 要 选择 元 素 的 矩形 区 域 ， 取 决 于 如 何 设 置 选项 ”) 来 一 次 选择 多 个 相 邻 的 元 
系 一 一 更 像 是 我 们 经 稼 在 很 多 果 面 应 用 中 操作 的 那样 。 

另外 ， 可 选择 部 件 允 许 在 单 击 或 者 拖 动 过 程 中 按 下 Ctrl 键 (Mac 下 是 Command 键 ) 不 放 ， 
从 而 回 已 经 选择 的 元 系 集 合 中 添加 新 元 素 。 

现在 可 以 打开 jQuery UI 可 选择 实验 室 页面 ， 该 页 面 如 图 10-8 所 示 ， 文 件 地 址 是 chapter10/ 
selectables/lab.selectables.html。 在 这 个 实验 室 中 ， 我 们 使 用 DVD Ambassador 表格 形式 的 结果 集 
作为 测试 对 象 。 

F 面 使 用 默认 的 选项 来 尝试 一 些 交 互 操作 。 

口 练习 1 一 一 在 做 任何 改变 和 单 击 任何 按钮 之 前 , 先 在 数据 表格 上 移动 鼠标 光标 , 并 尝试 单 
击 或 者 在 多 个 行 上 拖 动 鼠标 。 注 章光 标的 外 观 没 有 发 生 任何 改变 ， 而 且 在 单 击 时 没有 产 
生 任何 效果 。 拖 动 只 会 选中 浏览 右 中 的 文本 。 

让 选项 保持 它们 的 默认 设置 ， 单 击 Apply 投 钮 。 现 在 注意 当 鼠 标 光 标 巧 傈 在 任意 数 
据 行 时 它 的 外 观 改变 成 了 手 形 指针 。 当 DOM 元 素 成 为 可 选择 的 元 素 时 ( 有 资格 被 选择 )， 
jQuery UI 会 在 那个 元 素 上 放置 类 ui-selectee。 在 实验 室 页 面 , 下 面 的 CSS 规则 导致 了 
光标 的 变化 : 


.ULI-Selectee { cursor: pointer; } 






























































GD 这 里 指 的 是 tolerance 选项 ， 后 面 会 有 详细 介绍 。 
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现在 单 击 一 些 行 ， 注 意 每 当 单 击 一 行 时 ， 该 行 的 背景 色 都 会 发 生 改 变 。 当 选中 某 个 
元 素 时 ，jQuery UI 会 回 其 应 用 类 ui-selected, 实验 室 页 面 使 用 下 面 的 规则 来 改变 选中 
元 素 的 背景 色 : 


#testSubject .ui-selected { background-color: pink; } 








000, [jQuery in Action, 2nd Editior x nn jQuery UI Selectables Lab x \ 
€ > CC 合 让 http:/ /localhost/jaia2 /chapter9/selectables /lab.selectables.html Ea 口 - ££- 


jQuery UI Selectables Lab 


Resizing options 
filter: @ tr O td 
tolerance: @ unspecified © touch O ft 


| Apply | Disable | Enable | Reser ] 


Executed command: 





图 10-8 ”可 选择 实验 室 使 用 DVD Ambassador 中 的 HTML 结果 片段 作为 测试 对 象 








注意 每 当 单 击 一 行 时 ， 在 这 一 行 被 选中 的 同时 ， 任 何 之 前 选中 的 行 会 变 为 未 选中 状态 。 

D 练习 2 一 一 不 要 改变 任何 设置 或 者 单 击 任何 按钮 ， 选 中 一 行 ， 然 后 当选 择 其 他 行 时 按 下 
Ctr/Command 键 不 放 。 注 意 ， 当 单 击 时 按 下 Ctr/Command 键 会 使 之 前 选中 的 元 素 仍 然 处 
于 选中 状态 。 

口 练习 3 一 一 不 要 改变 任何 设置 或 单 击 任 何 按 钮 , 开始 一 个 跨 多 行 的 矩形 拖 动 操 作 。 确保 拖 
动 操作 从 行 的 内 部 开始 。 注 半 拖 动 操作 跨越 的 所 有 行 都 变 成 选中 状态 。 同 样 地 ， 在 拖 动 
操作 中 按 住 Ctr/Command 键 不 放 会 使 之 前 选中 的 行 保持 选中 状态 。 

目前 这 些 都 是 可 以 完成 的 。 
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10.5.1 创建 可 选择 元 素 


现在 ， 我 们 已 经 通过 示例 看 到 了 可 选择 部 件 的 运行 效果 ， 下 面 就 来 看 看 示例 所 使 用 的 
selectable() 方 法 。 


命令 语法 : selectable 


selectable (options) 
selectable('disable') 
selectable('enable') 
selectable('destroy') 
selectable('option', optionName, value) 


SerectaDret refresh') 
根据 指定 的 选项 使 包装 集中 的 元 素 可 选择 ， 或 者 基于 作为 第 一 个 参数 传 入 的 操作 字符 串 来 执 
行 其 他 的 可 选择 操作 


参数 

options (对 象 ) 一 个 散 列 对 象 , 由 要 应 用 到 包装 集 元 素 上 的 选项 组 成 ( 参见 表 10-9 )， 
从 而 使 得 这 些 元 素 可 选择 

disable， (字符 事 ) 暂时 地 禁用 包装 集中 任何 可 选择 元 素 的 可 选择 性 。 并 不 删除 元 
素 的 可 选择 性 ,可 以 通过 调用 这 个 方法 的 "enable' 变 体 来 恢复 元 素 的 可 选 
择 性 

"enaDle (字符 串 ) 重新 局 用 包 中 任何 可 选择 元 素 ( 它们 的 可 选择 性 已 被 禁用 ) 
的 可 选择 性 。 注 意 这 个 方法 不 会 向 任何 不 可 选择 的 元 素 添 加 可 选择 性 

'destroy (字符 串 ) 删除 包装 ws 

让 (字符 串 ) 更 新 可 选择 元 素 的 尺寸 和 位 置 。 主要 用 于 禁用 autoRefresh 选 
项 的 情况 

js me (字符 串 ) 基于 剩余 的 参数 ， 设 置 包 装 集 中 所 有 元 素 的 选项 值 ， 或 者 获取 


包装 集中 第 一 个 元 素 〈 必 须 是 可 选择 的 元 素 ) 的 选项 值 。 如 果 指 定 这 个 字 
符 串 作为 第 一 个 参数 ， 则 至 少 需要 提供 optionName 参数 

optionName (字符 串 ) 要 设置 或 者 返回 的 选项 名 称 的 值 ( 参见 表 10-9 ), 如 果 提 供 value 
参数 ， 则 这 个 值 就 成 为 选项 的 值 。 如 果 没 有 提供 value 参数 ， 则 返回 已 命 
名 选项 的 值 

Value (对 办 ) 要 设置 的 选项 的 值 ( 通过 optionName 参数 来 标识 ) 

返回 值 

包装 集 ， 除 了 返回 选项 值 的 情况 





创建 可 选择 元 素 可 使 用 的 选项 参见 表 10-9。 


灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 





310 ”第 10 章 jQuery UI 和 鼠标 交互 : 跟随 和 鼠标 的 移动 


表 10-9 jQuery UI 的 selectable() 方 法 的 选项 






































、 是 否 在 实验 
选 项 描 述 室 页 面 中 
autoRefresh (布尔 ) 如 果 为 true ( 默认 值 ) ， 则 在 选择 操作 开始 的 时 候 计 算 每 个 可 选择 项 目 
的 位 置 和 尺寸 
尽管 可 选择 操作 不 会 对 可 选择 元 素 的 位 置 和 尺寸 做 任何 改变 , 但 是 它们 可 能 会 被 
页 面 上 CSS 或 脚本 改变 
如 果 有 很 多 可 选择 元 素 ， 出 于 性 能 考虑 可 以 禁用 这 个 选项 ,然后 使 用 refresh 方 
法 来 手工 计算 这 些 值 
cancel 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 
delsy 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 
di etanee 请 参见 表 10-1 中 具有 相同 名 称 的 可 拖 动 操作 的 选项 
/外 由 或 = ( 选择 器 ) 指定 选择 需 来 找 出 包装 集中 哪些 类 型 的 子 元 素 会 成 为 可 选择 元 素 。 所 v 
有 这 些 元 素 都 被 添加 了 类 ui-selectee 
默认 情况 下 ， 所 有 的 子 元 素 都 可 以 作为 可 选择 元 素 
selected (函数 ) 指定 在 可 选择 元 素 上 创建 的 孔 数 ,用 来 作为 selectableselected 事 件 v 
的 事件 处 理 硕 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-10 
Seleeting (函数 ) 指定 在 可 选择 元 素 上 创建 的 函数 ， 用 来 作为 selectableselecting 事 V 
件 的 事件 处 理 锅 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-10 
Star ( 函数 ) 指定 在 可 选择 元 素 上 创建 的 函数 ， 用 来 作为 selectablestart 事 件 的 V 


事件 处 理 句 。 回 这 个 处 理 需 传人 事件 实例 ， 但 是 不 会 传递 其 他 信息 。 有 关 这 个 事件 
的 更 多 细节 ， 请 参见 表 10-10 


stop ( 函数 ) 指定 在 可 选择 元 素 上 创建 的 函数 ， 用 来 作为 selectablestop 事 件 的 事 v 
件 处 理 右 。 问 这 个 处 理 絮 传人 事件 实例 ,但 是 不 会 传递 其 他 信息 。 有 关 这 个 事件 的 
更 多 细 市 ， 请 参见 表 10-10 
tolerance (字符 串 ) fit 或 touch ( 默认 值 ) 其 中 之 一 Vv 
如 果 是 Eit， 则 拖 动 选择 必须 完全 包围 一 个 元 系 才 能 选择 这 个 元 素 。 在 一 些 布 局 
中 可 能 会 存在 问题 ， 因 为 拖 动 选择 必须 从 一 个 可 选择 元 素 内 部 开始 
如 果 是 touch， 则 拖 动 矩形 只 需要 和 可 选择 项 目的 任何 部 分 相交 就 能 选中 这 个 






































元 款 

unselected ( 咕 数 ) 指定 在 可 选择 元 素 上 创建 的 函数 ， 用 来 作为 selectableunselected Vv 
事件 的 事件 处 理 絮 。 有 关 这 个 事件 的 更 多 细 方 ， 请 参见 表 10-10 

unselecting ( 函数 ) 指定 在 可 选择 元 素 上 创建 的 限 数 ， 用 来 作为 selectableunselecting Vv 











事件 的 事件 处 理 硕 。 有 关 这 个 事件 的 更 多 细节 ， 请 参见 表 10-10 


现在 ,我 们 已 经 介绍 了 这 些 选 项 ， 下 面 就 来 使 用 可 选择 实验 室 尝 试 些 其 他 练习 。 

口 练习 4 一 一 重复 练习 1 到 练习 3 的 动作 ， 这 次 请 注意 观察 页 面 底部 的 Console 面板 。 这 个 
面板 会 显示 选择 操作 中 发 生 的 事件 。 我 们 会 在 下 一 方 讨论 有 哪些 信息 传人 这 些 事 件 。 

口 练习 5 一 一 目前 为 止 的 所 有 练习 中 ， 我 们 指定 filter 选项 为 tr， 这 使 得 整个 数据 行 成 
为 可 选择 元 素 。 单 击 Reset 按钮 或 刷新 页 面 ， 为 filter 选项 选择 td 值 ， 单 击 Apply。 
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在 数据 表格 中 单 击 来 选择 不 同 的 元 素 。 注 意 现在 可 以 选择 单个 的 数据 单元 格 而 不 是 整 行 
数据 。 
口 练习 6 一 一 改变 filter 选项 的 值 为 span, 单 击 Apply。 现 在 单 击 数据 结 采 中 各 种 不 同 的 
文本 值 。 注意 ,这 会 只 选择 文本 本 里 而 不 是 整个 单元 格 。( <td> 元 系 中 的 每 个 文本 值 都 包 
合 在 一 个 <span> 元 系 中 。 ) 
口 练习 7 重 置 页 面 ， 选 择 tolerance 选项 的 值 为 touch， 单 击 Apply。 尝 试 各 种 不 同 
的 拖 动 操作 ， 注 意 行 为 并 没有 发 生 改 变 ， 和 选取 框 重 登 的 任何 行 都 将 被 选择 。 
口 现在 改变 filter 值 为 td 并 重复 练习 ， 注 意 任何 与 选取 框 相 交 的 元 素 都 会 被 选中 。 
口 练习 8 一 一 保持 filter 的 值 为 td, 选择 tolerance 的 值 为 i 单 击 Apply。 重复 拖 
动 练习 ， 注 意 只 有 完全 被 选取 框 包 围 的 单元 格 才 会 被 选中 。 
现在 改变 filter 的 信 为 trz， 单 击 Apply， 青 次 尝试 。 有 什么 新 发 现 吗 ? 
因为 拖 动 选择 必须 从 一 个 可 选择 元 素 的 内 部 开始 ，tolerance 的 设置 "需要 可 选择 元 素 完 全 
被 选取 框 包围 才能 被 选中 ,而 数据 行 没有 被 其 他 可 选择 元 素 所 包围 , 因此 这 个 组 合 将 无 法 选取 任 
何 行 。 又 上 了 一 课 ?” 因此 使 用 tolerance 的 fit 值 时 一 定 要 小 心 。 
selectable() 的 选项 列表 比 其 他 交互 元 又 的 选项 列表 要 短 。 事 实 上 ， 大 部 分 都 是 为 可 选择 
事件 创建 事件 处 理 需 的 快捷 方式 。 不 过 这 些 事件 是 可 选择 操作 过 程 中 的 重要 组 成 部 分 。 下 面 就 来 
研究 这 些 事 件 。 























10.5.2 ”可 选择 事件 


这 么 一 个 看 似 简 单 的 操作 , 却 在 一 个 可 选择 操作 中 触发 了 一 系列 的 事件 集 。 不 仅 有 用 来 识别 
操作 开始 和 结束 的 事件 ,而 且 有 选择 或 反选 单个 元 素 的 事件 ,甚至 有 元 素 选择 状态 即将 改变 之 前 
的 事件 。 

和 其 他 的 交互 元 素 不 同 ,可 选择 事件 没有 传人 处 理 需 的 固定 结构 。 相 反 ， 如 果 有 任何 事件 信 
县 的 话 ， 和 都 会 根据 不 同 的 事件 类 型 进行 调整 后 再 传人 处 理 硕 。 表 10-10 描述 了 可 选择 事件 以 及 传 
入 这 些 事件 的 数据 。 

如 果 你 对 某 些 事 件 不 了 解 的 话 ， 特别 是 类 似 selectableselecting 和 selectablese- 
lected 事件 的 区 别 ， 请 重复 可 选择 实验 室 的 练习 ， 仔 细 观 察 Console 面板 以 了 解 在 执行 不 同类 
型 的 选择 操作 时 是 如 何 触 发 事件 的 。 

好 了 ， 我 们 已 经 选择 了 需要 的 元 素 。 现 在 该 怎么 办 呢 ? 

表 10-10 jQuery UI 为 可 选择 元 素 触 发 的 事件 
事 件 选 项 描 述 


selectablestart start 可 选择 操作 开始 时 触发 。 回 事件 处 理 角 传递 的 第 一 个 参数 是 事 
件 实例 ， 第 二 个 参数 是 一 个 空 对 象 



































OQ 这 里 指 的 是 将 tolerance 设置 为 fit 的 情况 。 
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事 件 选 项 
selectableselecting selecting 
selectableselected selected 


selectableunselecting unselecting 


selectableunselected unselected 


selectablestop stop 


( 线 ) 
描 述 
为 即将 被 选择 的 每 个 可 选择 元 素 触 发 。 回 事件 处 理 融 传递 的 第 
一 个 参数 是 事件 实例 ， 第 二 个 参数 是 一 个 包含 单个 属性 
selecting 的 对 象 ， 它 是 一 个 对 即将 选择 的 元 素 的 引用 


问 这 些 元 素 添 加 类 名 ui-selecting。 如 果 存 在 类 名 
ui-unselecting, 就 删除 这 个 类 名 


这 个 事件 所 报告 的 元 素 最 终 并 不 一 定 会 被 选择 。 如 果 用 户 拖 出 
一 个 包含 某 个 元 素 的 选取 框 , 则 这 个 元 际 就 会 被 这 个 事件 所 报告 。 
如 果 选 取 框 发 生 改变 导致 不 再 包含 这 个 元 素 ， 则 这 个 元 素 就 不 会 
被 选中 

为 每 个 选中 的 元 素 触 发 。 回 事件 处 理 天 传递 的 第 一 个 参数 是 事 
件 实例 , 第 二 个 参数 是 包含 单个 属性 selected 的 对 和 象 , 它 是 对 已 
选择 的 元 系 的 引用 


问 这 些 元 素 添 加 类 和 名 ui-selected 并 删除 类 ui-unselecteqd 


为 即将 不 被 选择 的 每 个 可 选择 元 素 触 发 。 回 事件 处 理 需 传递 的 
第 一 个 参数 是 事件 实例 ， 第 二 个 参数 是 包含 单个 属性 
unselecting 的 对 象 ， 它 是 对 即将 取消 选择 的 元 系 的 引用 

向 这 些 元 素 添 加 类 名 ui -unselecting 

和 selecting 事 件 一 样 ， 这 个 事件 所 报告 的 并 不 总 是 会 成 为 被 
选中 的 元 叉 

为 每 个 不 被 选择 的 元 素 触 发 。 回 事件 处 理 需 传递 的 第 一 个 参数 
是 事件 实例 ， 第 二 个 参数 是 包含 单个 属性 unselected 的 对 象 ， 
它 是 对 不 被 选择 的 元 素 的 引用 

从 这 些 元 素 上 删除 类 名 ui -unselecting 


可 选择 操作 结束 时 触发 。 事 件 实例 是 传人 这 个 事件 处 理 角 的 唯 
一 参数 


























10.5.3 ”查找 已 选择 的 和 可 选择 的 元 素 











可 选择 元 素 事 件 中 最 经 常 绑 定 的 事件 可 能 是 selectablestop, 它 会 在 选择 事件 发 生 和 结 
后 通知 我 们 。 在 这 个 事件 的 处 理 融 中， 我 们 总 是 而 望 确定 最 终 选 择 了 哪些 元 系 。 
一 般 我 们 不 会 关心 选择 发 生 的 用 户 选 中 项 , 但 震 要 知道 最 终 选 中 了 哪些 项 , 例如 当 需 要 和 服 





务 册 通信 的 时 候 。 

















通常 使 用 保持 状态 的 HTML 控件 将 状态 作为 表单 提交 的 一 部 分 ， 而 无 需 我 们 提供 任何 帮助 。 
但 是 如 朱 需 要 将 可 选择 元 素 的 选择 项 作为 表单 提交 的 一 部 分 来 进行 交流 ， 甚 至 是 作为 Ajax 请 求 





的 参数 ， 就 需要 收集 选择 了 哪些 项 。 











你 可 能 会 回想 起 可 排序 交互 部 件 提 供 了 几 个 方法 , 可 以 确定 可 排序 元 系 的 最 终 状 态 。 令 人 失 


望 的 是 可 选择 部 件 不 具备 相同 的 功能 。 
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但 是 失望 也 只 是 暂时 的 。 可 以 使 用 jQuery 选择 希 轻 松 地 获取 选择 的 元 素 ， 因 此 使 用 一 个 专 
门 的 方法 来 获取 这 些 元 素 融 没有 必要 了 。 因 为 每 个 选择 的 元 素 都 被 标记 了 类 名 ui-selected， 
所 以 获取 包含 所 有 选择 元 了 素 的 包 淡 集 将 会 非常 容易 ， 如 下 所 示 : 
S$S('.ui-selected') 
如 果 只 想 获取 选择 的 <div> 元 素 ， 那 么 可 以 这 么 做 : 
Ss('div.ui-selected') 
很 多 时 候 我 们 想 做 的 可 能 是 收集 选择 的 元 素 ,， 以 便 将 选择 项 传输 到 服务 硕 , 这 与 复 选 框 或 者 
单 选 按钮 使 用 请 求 参数 来 传输 数据 一 样 。 如 果 想 让 选择 项 作为 表单 提交 的 一 部 分 回 服务 需 提 交 ， 
一 个 人 简单 的 方法 是 在 提交 之 前 癌 表 单 添加 隐藏 的 <input> 元 素 ( 为 每 个 选择 的 元 素 添 加 一 个 隐藏 
字段 
在 可 选择 实验 室 中 ,假设 我 们 想 要 将 所 有 选择 的 电影 名 称 作为 名 为 title[] 的 请 求 参 数 数组 
来 提交 。 可 以 使 用 位 于 表单 提交 处 理 硕 中 的 如 下 代码 来 实现 : 
$s('.ui-selected') .each (function()t 
$s('<input>') 
.attr(t 
type: 'hidden', 
name: 'title[]', 


value: S$('td:first-child span',this) .html () 


}) 
.appendTo ('#1labForm' ) ; 


}); 
如 果 想 创建 一 个 查询 字符 串 来 呈现 title[] 请 求 参数 ， 那 么 可 以 编写 如 下 代码 
Var queryString = S$.param({'title[]': 
Ss.map($('.ui-selected') ,function(element)t 
return S$S('td:first-child span',element) .html (); 


}) 
Da 


练习 一 ， 编 写 一 些 代 码 来 获取 当前 选择 的 电影 元 条 并 通过 Ajax 请 求 $ .post () 来 提交 它们 。 
练习 二 ， 将 之 前 在 表单 中 创建 隐藏 字段 的 代码 提取 出 来 并 创建 为 一 个 jQuery 插件 方法 。 
这 就 完成 了 对 jQuery UI 交互 部 件 的 探索 。 下 面 来 回顾 一 下 学 到 了 哪些 知识 。 









































10.6 小结 


本 章 中 ， 我 们 继续 探索 jQuery UI， 专 注 于 它 提 供 的 鼠标 交互 技术 。 

首先 从 拖 动 部 件 开始 , 它 提 供 了 一 个 基本 的 交互 元 素 , 这 些 元 素 为 其 他 的 交互 部 件 运 转 的 基 
石 ， 其 他 那些 部 件 包括 可 放置 部 件 、 可 排序 部 件 、 可 改变 信 寸 部 件 以 及 可 选择 部 件 。 

我 们 看 到 了 拖 动 交 互 部 件 如 何 使 元 系 从 页 面 布局 中 脱离 开 来 , 从 而 使 得 我 们 可 以 在 页 面 中 日 
由 地 移动 它们 。 为 了 满足 不 同 需求 〈《 也 为 了 满足 剩余 交互 部 件 的 需求 )， 拖 动 部 件 提供 了 很 多 选 
项 可 以 用 来 日 定义 拖 动 的 行为 。 

可 放置 部 件 提 供 了 放置 可 拖 动 元 系 的 有 趣 行为 ， 从 而 提供 了 各 种 不 同 的 用 户 界 面 语义 动作 。 
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有 一 种 交互 行为 非常 第 见 , 因此 jQuery UI 为 此 提供 了 一 个 专门 的 交互 部 件 一 一 可 排序 部 件 。 
它 人 允许 我 们 拖 劲 和 放置 元 素来 重新 定义 它们 在 有 序列 表 ( 甚至 是 跨越 多 个 不 同 的 列表 ) 中 的 位 置 。 
jQuery UI 不 满足 于 只 是 让 我 们 将 元 素 移 来 移 去 ， 还 提供 了 能 够 改变 元 素 尺 才 的 可 改变 尺寸 部件， 
这 个 部 件 拥有 大 量 的 选项 来 日 定 义 调 整 尺寸 的 方式 、 方 法 。 
最 后 , 我 们 介绍 了 可 选择 部 件 , 它 可 以 癌 一 个 本 号 不 具备 可 选择 性 的 元 系 应 用 一 个 持久 的 选 
择 状 态 。 

总 之 , 这 些 交 互 部 件 给 予 了 我 们 强大 的 能 力 ， 可 用 来 实现 呈现 给 用 户 的 、 复 杂 的 但 易于 使 用 
的 用 户 界 面 。 

还 没有 完 。 这 些 交 互 部 件 也 是 jQuery UI 提供 的 更 加 高 级 部 件 的 基础 。 在 下 一 革 中 ， 我 们 将 
继续 探讨 jQuery U1， 详细 介绍 它 提 供 的 用 户 界 面部 件 。 
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jQuery UI 部 件 : 
超越 HTML 控件 


本 章 内 容 

口 使 用 jQuery UI 部件 扩 展 HTML 控件 集 

口 增强 HTML 按钮 

口 为 数字 和 日 期 的 输入 使 用 滑动 条 和 日 期 选择 需 控 件 
口 直观 地 显示 进度 

口 使 用 自动 完成 部 件 来 简化 长 的 列表 

口 使 用 选项 卡 部 件 和 手风琴 部 件 来 组 织 内 容 

口 创建 对 话 框 


自从 Web 开始 兴起 以 来 ， 开 发 者 们 一 直 被 HTML 所 提供 的 有 限 控件 集 所 限制 。 虽然 HTML 
控件 集 涵盖 了 从 简单 的 文本 输入 到 复杂 的 文件 选择 的 所 有 内 容 , 但 是 与 桌面 应 用 程序 所 使 用 的 控 
件 相 比 ， 这 些 控 件 还 是 黯然 失色 。HTMLS 承诺 要 扩展 这 个 控件 集 ， 但 是 要 被 所 有 主要 的 浏览 兢 
文 持 还 需要 一 段 时 间 。 

例如 ， 你 是 否 经 常 听 到 HTML 的 <select> 元 素 被 称 为 “组 合 框 ”( 对 比 桌 面 控件 组 合 框 ， 
<select> 元 素 只 是 行为 上 类 似 而 已 ) ? 真正 的 组 合 框 是 非常 有 用 的 控件 ， 经 常 出 现在 桌面 应 用 
中 ， 然 而 Web 开发 者 却 无 缘 于 组 合 框 的 优点 "。 

但 是 随 着 计算 机 更 新 换代 ， 浏览 器 已 经 增强 了 其 功能 ，DOM 操作 已 经 成 为 了 司空 见 惯 的 活 
动 ， 聪 明 的 Web 开发 者 已 经 开始 着 手 开 发 功能 丰富 的 应 用 。 通 过 创建 扩展 的 控件 ( 扩展 现 有 的 
HTML 控件 或 使 用 基本 的 元 素 从 头 创 建 控件 )， 开 发 者 社区 已 经 展示 了 使 用 现 有 工具 来 创建 丰富 
交互 部 件 的 创造 力 。 

站 在 核心 jQuery 库 的 肩膀 上 ，jQuery UI 为 我 们 这 些 jQuery 用 户 带 来 了 创造 力 ， 通 过 提供 一 
套 自 定义 控件 来 解决 第 见 的 输入 问题 ( 很 难 使 用 传统 的 基本 控件 集 来 解决 )。 通 过 使 标准 的 元 素 
和 其 他 元 素 协 调 一 致 地 工作 ( 视觉 效果 也 很 好 )， 并 接受 一 定 区 间 内 的 数字 值 ， 来 设置 日 期 值 或 
以 新 的 方式 来 组 织 内 容 。jQuery UI 提供 了 一 套 有 价值 的 部 件 集 ， 为 用 户 在 页 面 上 输入 数据 提供 


















































中 时 面 应 用 中 的 组 合 框 功能 强大 ， 用 户 不 仅 可 以 从 预先 定义 的 列表 中 选择 一 项 ， 也 可 以 直接 在 文本 框 中 输入 ， 然 而 
HTML 的 <select> 元 系 只 人 允许 用 户 从 预定 义 列 表 中 选择 一 项 。 
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更 愉快 的 体验 (同时 也 可 以 简化 编码 )。 

随 着 对 jQuery UI 提供 的 核心 交互 部 件 的 深入 讨论 , 我 们 会 继续 观察 jQuery UI 都 提供 了 哪些 
日 定义 控件 ( 部件， 这 些 控件 给 予 我 们 更 多 选项 来 接受 用 户 的 输入 ) 来 弥补 HTML 控件 集 的 不 
足 。 在 本 章 中 ， 我 们 将 会 探讨 如 下 jQuery UI 部件 。 

口 按钮 (11.1 节 ) 

口 滑动 条 (11.2 市) 

口 进度 条 (11.3 节 ) 

口 目 动 完成 带 ( 11.4 市) 

口 日 期 选择 硕 ( 11.5 市 ) 

口 选项 卡 (11.6 市 ) 

口 手 风 芬 (11.7 节 ) 

口 对 话 框 (11.8 坟 ) 

和 前 一 曹 一 样 ， 本 草 也 很 长 ! 并 且 和 交互 部 件 一 样 ，jQuery UI 方法 使 用 一 种 独特 的 模式 来 
创建 部 件 从 而 使 其 易于 理解 。 与 交互 部 件 不 同 的 是 , 本 章 中 的 部 件 是 相互 独立 的 ,因此 你 可 以 根 
据 目 己 的 喜好 来 阅读 。 

完 从 一 个 可 以 修改 现 有 控件 元 系 样式 的 简单 部 件 开始 : 按钮 。 


11.1 按钮 和 按钮 组 


在 我 们 为 HTML 4 控件 集中 控件 种 类 的 缺乏 而 感到 居 异 的 同时 ，HTML 4 控件 集 却 提 供 了 很 
多 功能 重复 的 按钮 控件 。 

这 就 是 <button> 元 对 ,以 及 不 少 于 6 种 按钮 语义 的 <input> 元 际 : button、 submit、 reset、 
image、 checkbox 以 及 radio, 此 外 ， <button> 元 系 拥 有 子 类 型 button、submit 以 及 reset， 
它们 的 语义 与 那些 相应 的 输入 元 素 类 型 重复 。 

















注意 D0000000 HIMLODU0000000<inpvt>00000000000000 
UDOUOUDODUODUODUOUOUO0U0UUUUUUUUUU <button>sU00 
DDOUOUDODUODOUUOUUOUUU0UU0MDUUUUD <inpot> UUUUUUD 
DDOUODOU0DUODUODOUU0UO0UUU0UU0UUUUUUUD 











这 些 按 钮 类 型 提供 各 种 不 同 的 语义 , 它们 在 页 面 中 非常 有 用 。 但 是 , 当 更 深入 探 示 jQuery UI 
部 件 集 的 时 候 ， 我 们 将 会 看 到 它们 移 认 的 可 见 样 式 与 各 种 部 件 所 展示 的 样式 配合 得 不 是 很 好 。 
11.1.1 Ul 主题 中 的 按钮 外 观 

还 记得 在 第 9 草 最 开始 我 们 下 载 了 jQuery UI 吗 ? 有 多 个 主题 可 供 我 们 来 选择 下 载 ， 每 一 个 
主题 都 会 向 jQuery UI 元 素 应 用 不 同 的 外 观 。 

为 了 让 按钮 匹配 这 些 样式 ,我们 可 以 在 CSS 文件 中 查找 选择 的 主题 ， 和 尝试 找 出 可 以 应 用 到 
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按钮 元 素 的 样式 , 使 按钮 元 紊 与 其 他 元 素 的 外 观 相 协调 。 但 是 事实 证 明 , 我 们 不 需要 这 么 做 一 一 
jQuery UI 提供 了 一 个 方法 来 增强 按钮 控件 以 便 使 其 外 观 与 主题 相 匹 配 ， 而 无 需 改 变 按钮 元 素 的 
语义 。 此 外 ,jQuery UI 还 给 予 了 按钮 元 素 悬 俘 样 式 〈 当 鼠标 指针 在 按钮 元 系 上 县 停 时 ， 用 来 轻 
微 改 变 其 外 观 ) 一 一 这 是 无 样式 按钮 所 缺少 的 功能 。 

button () 方 法 会 修改 单个 的 按钮 来 增强 其 外 观 , 而 buttonset () 方 法 对 一 组 按钮 起 作用 ( 通 
第 是 一 组 单 选 按 钮 或 复 选 框 )， 不 仅 设置 这 些 按钮 的 主题 ， 而 且 会 让 它们 看 起 来 像 是 一 个 紧密 结 
合 的 整体 。 

思考 图 11-1 中 显示 的 按钮 。 











Individual buttons 
A <button> element | ( An <input> button ) Jmage 


Checkbox group 





口 Checkbox 1 OO Checkbox 2 口 Checkbox 3 
Radio group 
OO Radio | © Radio 2 OO Radio 3 


Just buttons group 


A <button> element A <button> element A <button> element 





图 11-1 没有 任何 样式 的 各 种 按钮 元 素 一 一 相当 单调 ， 是 吧 
这 个 页 面 片 段 展 示 了 一 些 没有 应 用 主题 的 单个 按钮 元 素 、 复 选 框 分 组 、 单 选 按钮 以 及 
<button> 元 系 的 外 观 。 所 有 的 按钮 在 功能 上 完全 可 以 正 浓 工作 ， 但 是 在 视觉 上 并 不 吸引 人 。 
在 给 单个 按钮 应 用 了 button () 方 法 ， 并 给 按钮 分 组 应 用 了 puttonset () 方 法 之 后 〈 使 用 
Cupertino 主题 的 页 面 )， 外 观 改 变 成 图 11-2 所 示 的 样子 。 


Individual buttons 


A <button> element An <input> button 
Checkbox group 
Checkbox 1 Checkbox 2 Checkbox 3 
Radio group 
Radio 1 Radio 2 Radio 3 


Just buttons group 


A <button> element A <button> element A <button> element 











图 11-2 ”在 进行 了 样式 改造 后 ， 按 钮 都 换 上 了 最 好 看 的 样式 并 且 准 备 好 去 吸引 用 户 的 注意 力 
在 应 用 了 样式 之 后 ， 图 11-1 中 显示 的 按钮 看 起 来 就 相当 地 简朴 了 。 


不 仅仅 是 按钮 的 外 观 被 改变 以 匹配 主题 , 而 且 分 组 也 应 用 了 样式 以 便 使 分 组 中 的 按钮 形成 一 
个 视觉 整体 来 匹配 它们 的 逻辑 分 组 。 尽 管 单 选 按钮 和 复 选 框 已 经 被 重 设 样式 ， 从 而 看 起 来 像 “ 正 
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利 的 ”按钮 ， 但 是 它们 仍然 还 保持 有 其 语义 上 的 行为 。 当 引入 jQuery UI 按钮 实验 室 后 ， 我 们 将 
会 在 实际 运行 中 看 到 上 述 操作 。 
随 着 在 本 章 的 剩余 部 分 对 jQuery UI 部 件 的 学 习 ， 我 们 将 会 越 来 越 熟 悉 这 个 主题 样式 ”。 
不 过 首先 来 看 一 下 将 这 个 样式 应 用 到 按钮 元 系 上 的 方法 。 


11.1.2 ”创建 市 有 主题 的 按钮 


jQuery UI 所 提供 的 用 来 创建 部 件 的 方法 与 我 们 在 前 一 革 中 看 到 的 交互 方法 避 循 相同 的 方式 : 
首先 调用 putton() 方 法 并 传递 一 个 散 列 选项 来 创建 部 件 ， 然 后 再 次 调用 相同 的 方法 ,传递 一 个 
字符 串 ( 用 来 标识 以 部 件 为 日 标 的 操作 ) 来 修改 部 件 。 

button() 和 buttonset() 方 法 的 语法 与 我 们 研究 的 UI 交互 部 件 的 方法 语法 类 似 ， 如 下 
所 不。 























命令 语法 : button 和 buttonset 


button (options) 

button('disable') 

button('enable') 

button('destroy') 

button('option', optionName, value) 
buttonset (options) 
buttonset('disable') 
buttonset('enable') 
buttonset('destroy') 


buttonset('option', optionName, value) 
为 包装 集中 的 元 素 设 置 主题 以 便 使 其 匹配 当前 已 加 载 的 jQuery UI 主题 ,甚至 可 以 为 非 按钮 元 
素 (比如 <span> 和 <div> ) 应 用 按钮 外 观 和 语义 。 


参数 

options ( 对象 ) 一 个 散 列 对 象 ， 由 要 应 用 到 包装 集 元 素 上 的 选项 组 成 (参见 表 
11-1 )， 从 而 使 这 些 元 素 成 为 带 有 主题 的 按钮 

‘disable (字符 串 ) 禁用 包装 集中 元 素 的 单 击 事件 

'enable' (字符 串 ) 重新 启用 包装 集中 元 素 的 按钮 语义 

'destroy (字符 串 ) 使 元 素 恢复 到 应 用 UI ee 

'option (字符 串 ) 基于 剩余 的 参数 ， 设 置 包 装 集中 所 有 元 素 的 选项 值 ， 或 者 获取 


包装 集中 第 一 个 元 素 ( 必须 是 jQuery UI 按 钮 元 素 ) 的 选项 值 。 如 果 指 定 这 
个 字符 串 作 为 第 一 个 参数 ， 则 至 少 需要 提供 optionName 参数 


GD 指 的 是 jQuery UI 的 Cupertino 主题 。 
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optionName (字符 串 ) 要 设置 或 者 返回 的 选项 名 称 的 值 ( 参见 表 11-1 )。 如 果 提 供 value 
参数 ， 则 这 个 值 就 成 为 选项 的 值 。 如 果 没 有 提供 value 参数 ， 则 返回 已 命 


名 选项 的 值 
value ( 对象 ) 要 设置 的 选项 的 值 ( 通过 optionName 参数 来 标识 ) 


包装 集 ， 除 了 返回 选项 值 的 情况 





为 了 将 按钮 主题 应 用 到 元 素 集 上 ， 我 们 使 用 一 组 选项 来 调用 button () 或 buttonset () 方 
法 ,或 者 不 带 参 数 接受 默认 的 选项 。 下 面 是 一 个 示例 : 


slsbucton’) butteont{t texty true Ti 





注意 “D000Dthemingg00000000000000 jQuery UIDUDOODOODOOD 
UUDUDU 


创建 按钮 时 可 用 的 选项 如 表 11-1 所 示 。 
button() 方 法 包含 大 量 的 选项 ， 你 可 以 在 按钮 实验 室 页 面 尝试 使 用 它们 ， 按钮 实验 室 页 面 
如 图 11-3 所 示 ， 你 也 可 在 chapterl1/buttons/lab.buttons.html 中 找到 这 个 页 面 。 


QAN 
| 





DjjQvery in Action, 2nd Editio' ix/ | jjQuery UI Buttons Lab x Wes 





€ > CC 全 ts http://localhost/jqia2/chapterll /buttons/lab.buttons.html 


ee jQuery UI Buttons Lab 今 


Button options 





text: @ unspecified Qtrue Ofalse 
primary icon: 「 一 unspecified 一 二 


相 
secondary icon: | 一 unspecified 一 加 


label: 


| Apply | Disable | Enable | Reset | 
Executed commands: 
$(testSubject').button({}); 
$('.buttonsetSubject’).buttonset() 





Pi 


standalone buttons 


A button A link (anchor) A submit button A reset button An input button 
Radio Set 

Jalapeno Seranno Habnero Anaheim 
Checkbox Set 


Mustard Ketchup Mayo Tabasco 

















图 11-3 jQuery UI 按钮 实验 室 页 面 可 以 让 我 们 看 到 按钮 在 应 用 样式 之 前 和 之 后 的 状态 ， 
还 可 以 修改 其 中 的 选项 
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你 可 以 一 边 阅 读 表 11-1 中 的 选项 列表 ， 一边 在 这 个 实验 室 做 相应 的 练习 。 
表 11-1 jQuery UI 按钮 和 按钮 组 的 选项 


选 项 摘 述 是 否 在 实验 室 页 面 中 


icons ( 对 象 ) 指定 一 个 或 两 个 要 在 按钮 中 显示 的 图 标 : 主要 图 标 在 左边 ， 次 要 v 
图 标 在 右边 。 主 要 图 标 由 对 象 的 primary 属 性 来 标识 ， 次 要 图 标 由 
secondary 属 性 来 标识 

这 些 属性 的 值 必须 是 174 个 被 支持 的 调用 名 称 之 一 与 jQuery 按钮 图 标 集 
相 一 致 )。 我 们 马上 就 会 讨论 到 这 些 网 标 


如 果 和 省 略 ， 则 不 会 显示 图 标 





























lel ( 字符 串 ) 指定 要 在 按钮 上 显示 的 、 履 盖 原 始 标签 的 文本 。 如 果 省 略 ， 则 V 
会 显示 元 素 的 原始 标签 。 对 于 单 选 按钮 和 复 选 框 而 言 ， 原 始 标签 就 是 与 欣 
件 相 关联 的 <label> 元 素 

text (布尔 ) 指定 是 否 要 在 按钮 上 显示 文本 。 如 果 指 定 为 false， 且 icons 选 V 





项 至 少 指定 了 一 个 图 标 ， 则 不 显示 文本 。 默 认 显 示 文 本 











除了 icons 选项 外 ， 其 他 选项 都 很 简单 明了 。 下 面 就 来 和 丛 要 探讨 下 icons 选项 。 


11.1.3 ”按钮 图 标 





jQuery UI 提供 了 一 个 可 以 显示 在 按钮 上 的 、 由 174 个 主题 图 标 组 成 的 集合 。 你 可 以 在 左边 
显示 单个 图 标 (主要 图 标 )， 也 可 以 一 个 在 左边 一 个 在 右边 ( 次 要 图 标 )。 

icons 是 用 来 标识 图 标的 类 名 。 例 如 ， 要 创建 一 个 带 有 (小 扳手 图 标的 按钮 ， 可 以 使 用 这 上 段 
代码 : 


$S('H#¥wrenchButton') .buttonl(t 
icons: { primary: 'ui-icon-wrench' } 


FO 
如 果 想 在 左边 显示 星 型 图 标 ， 在 右边 显示 心 型 图 标 ， 可 以 这 么 做 : 


$s('#weirdButton') .buttonl(t 
licons: { primary: 'uUui-icon-star', secondary: 'ui-icon-heart' } 


}); 
一 张 图 片 胜 过 千言 万 语 , 所 以 我 们 提供 了 一 个 包含 所 有 按钮 图 标的 页 面 (使 用 图 标的 名 称 来 
标明 按钮 ), 而 不 是 在 这 里 列 出 可 用 的 图 标 名 称 。 这 个 页 面 如 图 11-4 所 示 , 你 也 可 以 在 chapter11/ 
buttons/ui-button-icons.html 找到 它 。 

你 可 以 保存 这 个 页 面 ， 以 便 随 时 查找 要 在 按钮 上 使 用 的 图 标 。 
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| OOy Tey ER 到 和 
所 > LCG) 从 | hep://localhost/jqia2/chapterll /buttons/ui-button-icons.html BS DOD- £- 








jQuery UI Button Icons 


人 ul-icon-carat—1-n + ul-icon-arrowthick -2-n-s 在 Wi-icon~tag i ui-icon~ pause 
ui~icon-carat—-1-ne 只 uli-icon-arrowthick-2-ne~-sw 得 ul-icon-home p> ui~-icon- seek— next 
> ui-icon- carat— 1~€ 名 则 -icon-arrowthick 一 2 一 -WwW 四 ul-icon-flag Wi-icon- seek— prev 
ui~icon-carat-1-se ™» ul-icon-arrowthick-2-se-nw 甸 ul-icon- calendar > ul-icon- seek -end 
~ vi-lcon-carat-1-s 1 uli-icon-arrowthickstop-1-n = ui-icon-cart 可 ul-icon-seek-start 
ui-icon-carat—1-Sw i ui-icon-arrowthickstop—1-€ pa ui-icon-pencii I. ui-icon-seek—first 
< -icon-carat-1-w 二 ui-icon-arrowthickstop—1—s 大 旭 -icon-cock uli-icon-stop 
uj-icon-carat— 1— rw [a ui-icon-arrowthickstop—-1-w Le ul-icon-disk 会 ui-icon-eject 
+ ui-icon-carat-2-n-s » ul-icon-arrowreturnthick-1-w 5 ui~icon-calculator 可 ui-icon-volume-off 
妙 ul-icon-carat-2-e-w + ui-icon-arrowreturnthick-1-n Ea ul-icon-zoomin 4 ul-icon-volume-on 
ui-icon-triangle-1-n ©® ui-icon-arrowreturnthick-1-e€ 局 ui- icon~zoomout 心 uli-icon- power 
wi-icon-triangle-1-ne 不 vl-icon-arrowreturnthick—-1-s A uli-icon- scarch ES ul-icon-signal- diag 
上 ui-icon-triangle-1-e nm ui-icon-arrowreturn~-1-w Ea vi-icon-wrench 人 ui-icon- signal 
ui-icon-triangle~1- se $ ui-icon-arrowreturn- 1-n 条 Ui-icon-gear = ui-icon-battery-0 
了 本 -icon-triangie- 工 -3 » ui-icon-arrowreturn-1-€ 学 yi-icon- heart D ui-icon- battery- 1 L 
yi-icon-triangle-1-sw £ ui-icon-arrowreturn-1-s ul-icon- star = ui-icon-battery-2 y 





图 11-4 jQuery UI 按钮 图 标 页 面 可 以 让 我 们 看 到 所 有 可 用 的 按钮 图 标 及 其 名 称 


11.1.4 ”按钮 事件 


与 交互 部 件 及 其 他 部 件 不 同 ，jQuery UI 按钮 没有 关联 的 自 定义 事件 。 
为 这 些 部 件 仅仅 是 现 有 HIML4 控 件 的 带 主 题 版 本 , 因此 可 以 像 没 扩展 之 前 一 样 使 用 原生 
事件 。 要 处 理 按钮 单 击 ， 只 需要 继续 处 理 按钮 的 单 击 事件 就 可 以 了 。 


11.1.5 ”设置 按钮 样式 


使 用 jQuery UI 的 button() 和 buttonset () 方 法 的 目的 就 是 使 按钮 与 所 选择 的 jQuery UI 
主题 相 匹配 。 这 就 好 像 我 们 把 按钮 带 上 电视 节目 What Not to Wear ( 中 译 为 “改头换面 "， 是 美 
国 和 严 国 电视 台 的 一 档 流行 的 换 装 真人 秀 广 目 )。 这 些 按钮 刚 开始 时 很 单调 、 丑 陋 ， 经 过 改造 后 
却 以 惊艳 的 外 观 出 现 ! 但 即便 如 此 , 我 们 也 要 调整 这 些 元 素 的 样式 , 使 其 在 页 面 上 更 美观 。 例 如 ， 
按钮 图 标 页 面 上 按钮 的 文本 被 调整 为 较 小 的 尺寸 以 便 适 合 页 面 上 的 按钮 ”。 

jQuery UI 在 创建 部 件 时 既 扩 展 了 已 有 元 素 又 创建 了 新 的 元 素 , 并 且 对 匹配 ( 定义 在 主题 CSS 
样式 表单 中 ) 样式 规则 的 元 素 应 用 了 类 名 。 我们 可 以 目 行 使 用 这 些 类 名 来 扩展 或 复 善 在 页 面 上 的 
主题 定义 。 

例如 ， 在 按钮 图 标 页 面 ， 对 按钮 文本 的 字体 大 小 进行 了 这 样 的 调整 : 


.Uli-button-text { font-size: 0.8em; } 


























Q 这 档 节 目 每 期 都 会 选 出 一 位 他 人 推荐 的 参与 者 ， 他 们 的 日 常 穿着 均 是 十 分 怪异 或 没 品味 ， 急 需 改头换面 。 一 一 编者 注 
@) 这 里 指 的 是 为 ui-button-icons.html 页 面 中 按钮 上 的 文本 增加 了 CSS 样式 : font-size:0.8em。 
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类 名 ui-button-text 被 应 用 到 包含 按钮 文本 的 <span> 元 系 上 。 

覆盖 (由 jQuery UI 创建 的 ) 部 件 的 元 际 、 选 项 以 及 类 名 的 各 个 方面 几乎 是 不 可 能 的 ， 因 此 
我 们 没有 去 尝试 。 我 们 采取 的 方式 是 使 用 一 些 技巧 , 为 每 个 部 件 类 型 应 用 一 些 可 能 需要 在 页 面 上 
使 用 的 最 常用 的 样式 。 前 面 讲 过 的 改变 按钮 文本 样式 的 技巧 就 是 一 个 很 好 的 示例 。 

按钮 非常 适合 用 户主 动 发 起 行动 的 情况 , 但 是 除了 单 选 按 钮 和 复 选 框 , 按钮 并 不 能 呈现 我 们 
可 能 想 要 从 用 户 那 里 获取 的 值 。 一 些 代表 逻辑 表单 控件 的 jQuery UI 部件 让 我 们 能 够 轻松 获取 输 
和 人 类 型 〈 而 这 个 操作 长 期 以 来 都 是 令 人 舌 不 堪 言 的 )。 下 面 就 来 看 一 个 部 件 ， 它 减轻 了 获取 数字 
输入 的 负担 。 


11.2 ”滑动 条 


获取 数字 输入 历来 是 Web 开发 者 非常 头痛 的 事情 , HTML 4 控件 集 没有 适合 接受 数字 输入 的 
控件 。 

文本 字段 可 以 (并且 也 经 常 ) 被 用 来 接受 数字 输入 。 这 并 不 是 最 优 的 方法 ， 因 为 必须 转换 并 
验证 用 户 输入 的 值 ， 以 确认 用 户 没 有 输入 “xyz” 作 为 他 们 的 年 龄 或 居住 的 年 数 。 

尽管 事后 验证 的 用 户 体 验 并 不 理想 , 但 是 限制 文本 控件 只 能 输入 数字 也 有 问题 。 当 用 户 持续 
单 击 A 键 但 是 没有 任何 事情 发 生 时 ， 用 户 可 能 会 感到 困惑 。 

在 桌面 应 用 中 ,要 获取 在 一 定 区 间 内 的 数字 值 时 通常 会 使 用 滑动 条 控件 ,与 文本 输入 框 相 比 ， 
滑动 条 的 优点 是 它 不 会 让 用 户 输入 错误 的 值 。 用 户 用 滑动 条 选择 的 任何 值 都 是 有 效 的 值 。 

jQuery UI 提 供 了 一 个 滑动 条 控件 ， 这 样 我 们 就 能 利用 它 带 来 的 好 处 了 。 
11.2.1 创建 滑动 条 部 件 

滑动 条 通常 表现 为 包含 手柄 的 “水 槽 ”形式 。 手 柄 可 以 沿 着 水 槽 移动 以 表示 在 该 区 间 内 选中 
的 值 ， 用 户 也 可 以 在 水 槽 中 单 击 来 表示 手柄 要 移动 到 的 地 方 。 

滑动 条 可 以 是 水 平 的 ， 也 可 以 是 垂直 的 。 图 11-5 展示 了 一 个 桌面 应 用 程序 中 的 水 平滑 动 条 。 


Brightness: 一 一 人 一 | 


图 11-5 滑动 条 可 以 用 来 表示 一 定 区 间 内 的 值 。 在 这 个 示例 中 ， 是 从 最 小 亮度 到 最 大 
亮度 的 值 

和 button () 方 法 不 同 , 清 动 条 不 是 通过 扩展 已 有 的 HTML 控件 来 创建 的 ， 而 是 使 用 基本 的 
元 素 ( 例 如 <aqiv> 和 <a> ) 组 合 而 成 的 。 设置 日 标 <div> 元 厅 的 样式 来 呈现 滑动 条 的 水 模 ， 然后 在 
其 中 创建 锁 点 元 素来 形成 手柄 。 

请 动 条 部 件 可 以 拥有 任意 数量 的 手柄 ， 因 此 可 以 包含 任意 数量 的 值 。 使 用 数组 来 指定 值 ， 数 
组 的 每 一 项 对 应 一 个 手 顶 。 但是， 由 于 单个 手柄 的 情况 比 多 个 手 顶 的 情况 更 为 普遍 ， 因 此 有 专门 
的 方法 和 选项 来 处 理 单个 手柄 的 情况 。 
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我 们 不 用 为 只 有 单个 手柄 元 素 的 情况 处 理 数 组 ， 因 为 它 是 使 用 滑动 条 最 常见 的 方式 。 感 谢 
jQuery UI 团 队 ! 我 们 非常 感激 你 们 所 做 的 一 切 ! 
下 面 是 slide() 方 法 的 语法 。 





命令 语法 : sliqder 
slider (options) 
slider('disable') 
slider('enable') 
slider('destroy') 
slider('option', optionName, value) 
slider('value', value) 


slider('values', index, values) 


把 目标 元 素 ( 推荐 使 用 <div> 元 素 ) 转变 为 滑动 条 控件 


参数 

options (对象 ) 一 个 散 列 对 象 ， 由 要 应 用 到 包装 集 元 素 上 的 选项 组 成 (参见 表 11-2 )， 
从 而 使 元 素 成 为 消 动 条 

'disable' (字符 串 ) 禁用 滑动 条 控件 

‘enable' (字符 串 ) 重新 启用 被 禁用 的 滑动 条 控件 

‘destroy es 

ooBtiom: (字符 串 ) 基于 剩余 的 参数 ,设置 包装 集中 所 有 元 素 的 选项 值 , 或 者 获取 和 包 


集中 第 一 个 元 杀 ( 必须 是 滑动 条 元 素 ) 的 选项 值 。 ER si 
第 一 个 参数 ， 则 至 少 需 要 提供 optionName 参数 

optionName (字符 串 ) 要 设置 或 返回 的 选项 名 称 的 值 ( 参见 表 11-2 )。 如 果 提 供 value 参 
数 ， 则 这 个 值 就 成 为 选项 的 值 。 如 果 没 有 提供 value 参数 ， 则 返回 已 命名 选 
项 的 值 

Value (对 象 ) 和 'option' 一 起 使 用 时 ， 指 定 要 设置 选项 的 值 ( 通过 optionName 
参数 来 标识 ); 和 'value' 一 起 使 用 时 ， 指定 为 滑动 条 设置 的 值 ; 和 'values 
一 起 使 用 时 ， 指 定 为 多 个 手柄 设置 的 值 


Value' (字符 串 ) 如 果 提 供 value 值 ， 则 为 单 手柄 滑动 条 设置 值 并 返回 那个 值 ; 五 
则 返回 滑动 条 的 当前 值 
yalues' (字符 事 ) 对 于 拥有 多 个 手柄 的 滑动 条 ， 获 取 或 者 设置 指定 手柄 的 值 ， 必 须 指 


定 index 参数 来 识别 到 底 是 哪个 (或 哪些 ) 手柄 。 如 果 提 供 values 参数 ， 
则 设置 手柄 的 值 ; 否则 返回 指定 手柄 的 值 

index (数字 | 数组 ) 新 值 将 要 分 配给 的 手柄 下 标 或 手柄 索引 的 数组 

返回 值 

包装 集 ， 除 了 返回 选项 值 或 手柄 值 的 情况 
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在 创建 请 劲 条 的 时 候 ， 可 以 使 用 很 多 不 同 的 选项 来 创建 党 有 各 种 行为 和 外 观 的 滑动 条 控件 。 


当 你 阅读 表 11-2 中 的 选项 时 , 请 打开 文件 chapterll/sliderslab.sliders.html 中 的 滑动 条 实验 


(如 图 11-6 所 示 )， 然 后 跟着 实 验 室 进行 练习 ， 壬 试 不 同 的 选项 。 


= O 9, Djauery Ul Sliders Lab x Wm 


f 了 了 CC 从 Ts http:/ /localhost/jqia2/chapterl1 /sliders/lab.sliders.html 











we jQuery UI Sliders Lab 今 


ER 


Button options 
animate: @ unspecified Ofalse Otrue Osilow Onormal Ofast O 


orientation: @ unspecified OQ horizontal OQ vertical 
min: 


LU Use image handle 


| Apply | Disable 外 Enable | Reset | 


Executed commands: 
$('.testSubject').slider({ 》); 








At 11:48:50.209 - sliderchange, value = 17 


Value: 17 





At 11:48:50.189 - sliderstart, value = 0 
At 11:48:50.191 - sliderslide, value = 17 
At 11:48:50.192 - sliderchange, value = 17 
At 11:48:50.208 - sliderstop, value = 17 

















图 11-6 jQuery UI 滑动 条 实验 室 展 示 了 可 以 用 来 建立 和 操作 jQuery UI 滑动 条 的 各 种 方式 


选 


animate 


项 摘 述 





表 11-2 jQuery UI 滑动 条 的 选项 





可 以 是 一 个 持续 时 间 值 ， 也 可 以 是 如 下 字符 串 之 一 : slow、notrmal1 或 East。 默 
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是 否 在 实验 
室 页 面 中 
〈 布尔 | 字符 串 数 字 ) 如 末 为 true， 则 使 手柄 平稳 地 移动 到 在 水 槽 内 单 击 的 位 置 。 


认 情 况 下 ,手柄 会 瞬间 移动 
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( 线 ) 
、 是 是 否 在 实验 
选 项 描 述 室 页 面 中 

change ( 函数 ) 指定 在 滑动 条 上 创建 的 函数 ， 用 来 作为 slidechange 事 件 的 事件 处 理 v 
需 。 有 关 这 个 事件 的 更 多 细节 《传人 处 理 需 的 信息 ) 请 参见 表 11-3 

max (数字 ) 指 定 滑动 条 可 以 达到 的 区 间 内 的 上 限 值 一 一 该 值 表示 了 手柄 可 以 移动 到 V 
的 (水 平滑 动 条 ) 最 右 端 或 者 〈 竺 直 清 动 条 ) 顶端 。 默 认 该 区 间 的 上 限 值 是 100 

min (数字 ) 指 定 滑 动 条 可 以 达到 的 区 间 内 的 下 限 值 一 一 该 值 表示 了 手柄 可 以 移动 到 Vv 
的 (水 平滑 动 条 ) 最 左 端 或 者 ( 垂直 滑动 条 ) 底 端 。 默 认 该 区 间 的 下 限 值 是 0 

Oriermktatlorm (字符 串 ) horizontal 或 vertical 的 其 中 之 一 。 默 认为 horizontal Vv 

range (布尔 | 字符 串 ) 如 果 指 定 为 true， 则 请 动 条 拥有 两 个 手柄 ， 并 且 在 这 两 个 手柄 V 
之 间 创 建 一 个 可 以 设置 样式 的 元 素 。 如 果 滑 动 条 只 有 一 个 手柄 ， 则 指定 min 或 max 
会 分 别 创建 一 个 从 手柄 到 滑动 条 开始 或 结束 位 置 的 区 间 元 素 。 默 认 不 创建 区 间 元 素 

start ( 函数 ) 指定 在 滑动 条 上 创建 的 哨 数 , 用 来 作为 slidestart 事 件 的 事件 处 理 需 。 V 
有 关 这 个 事件 的 更 多 细节 (传人 处 理 需 的 信息 ) 请 参见 表 11-3 

slide ( 函数 ) 指定 在 滑动 条 上 创建 的 函数 ， 用 来 作为 sl1ide 事 件 的 事件 处 理 颖 。 有 关 v 
这 个 事件 的 更 多 细节 (传人 处 理 器 的 信息 ) 请 参见 表 11-3 

step (数字 ) 指定 滑动 条 可 以 在 允许 的 最 大 值 和 最 小 值 之 间 移 动 的 最 小 步 长 值 , 例如 ， V 
步 进 值 为 2 只 允许 选择 偶数 数字 值 

步 进 值 将 会 均匀 地 分 割 区 间 
默认 情况 下 ，step 为 1 以 便 可 以 选择 所 有 的 值 

stop ( 函数 ) 指定 在 滑动 条 上 创建 的 函数 ， 用 来 作为 sl1idestop 事 件 的 事件 处 理 右 。 V 
有 关 这 个 事件 的 更 多 细节 (传人 处 理 需 的 信息 ) 请 参见 表 11-3 

value ( 数字 ) 指定 单个 手柄 滑动 条 的 初始 值 。 如 果 有 多 个 手柄 〈 人 参见 values 选 项 ) ， V 


则 指定 第 一 个 手柄 的 值 
如 宁 省 略 ， 则 初始 值 就 是 滑动 条 的 mini 值 
values (数组 ) 创建 多 个 手柄 并 指定 这 些 手柄 的 初始 值 。 这 个 选项 应 当 是 一 个 由 可 能 的 4 
值 组 成 的 数组 ， 每 个 值 对 应 一 个 手柄 
例如 ，[10,20,30] 将 会 使 滑动 条 市 有 三 个 初始 值 分 别 为 10、20 和 30 的 手柄 。 
如 果 省 略 ， 则 只 创建 一 个 手柄 








现在 就 来 探讨 滑动 条 控件 可 以 触发 的 事件 吧 。 


11.2.2 ”滑动 条 事件 


和 交互 部 件 一 样 ， 当 有 趣 的 事情 发 生 时 大 部 分 jQuery UI 部 件 会 触发 目 定 义 事件 。 我 们 可 以 
使 用 两 种 方式 其 中 之 一 来 为 这 些 事件 创建 处 理 带 : 可 以 在 祖先 层次 结构 中 的 任 苇 位 置 以 通 沼 的 方 
陈 来 绑 定 处 理 和 内， 也 可 以 将 处 理 带 指定 为 一 个 选项 〈 我 们 曾 在 上 一 中 看 到 过 这 种 方式 )。 

例如 ， 我 们 可 能 想 要 在 body 元 素 上 以 全 局 方式 处 理 滑 动 条 的 请 动 事件 : 


$s('body') .bind('slide',function(event,info){ ... }); 
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我 们 可 以 使 用 单个 的 处 理 融 为 页 面 上 的 所 有 请 劲 条 处 理 请 动 事件 。 如果 处 理 带 是 特定 于 一 个 
请 动 条 实例 的 ， 那 么 当 创 建 滑动 条 时 就 要 改 用 slide 选项 : 

$('#slider').slider({ slide: function(event,info){ ... } }); 

我 们 可 以 利用 这 种 灵活 性 ， 以 最 适合 页 面 的 方式 来 创建 处 理 硕 。 

和 交互 部 件 的 事件 一 样 ， 每 个 事件 处 理 融 郡 会 被 传人 两 个 参数 : 一 个 是 事件 示例 ,万 一 个 是 
包含 该 控件 信息 的 日 定义 对 象 。 是 不 是 非常 像 ? 

该 日 定义 对 和 象 包含 如 下 属性 。 


























Dj handle 对 被 移动 手柄 <a> 元 素 的 引用 。 

D value 一 一 代表 被 移动 手柄 的 当前 值 。 对 于 单个 手柄 的 清 动 条 来 说, 该 属性 被 认为 是 请 动 
条 的 值 。 

口 values 一 一 由 背 动 条 所 有 手柄 的 当前 值 组 成 的 数组 , 只 有 多 个 手柄 的 滑动 条 才 有 该 属性 。 











在 滑动 条 实验 室 ;Value 和 values 属性 用 来 实时 更 新 显示 在 滑动 条 下 面 的 值 。 
表 11-3 总 结 了 滑动 条 可 以 触发 的 事件 。 


表 11-3 ”jQuery UI 滑动 条 的 事件 














事件 选 描述 
”slide slige 在 滑动 条 中 拖 动手 柄 时 ， 为 nousemove 事 件 触发 。 返 回 false 会 
取消 滑动 
slidechange change 当 背 动 条 的 值 改 变 时 会 触发 ， 通过 用 户 活动 或 程序 来 改变 滑动 条 
的 值 
slidestart start 当 滑 动 开 始 时 触发 
slidestop stop 当 清 动 停止 时 触发 





slidechange 事件 可 能 是 最 有 趣 的 事件 之 一 ， 因 为 它 可 以 用 来 跟踪 滑动 条 的 单个 值 〈 或 多 
个 值 )。 

假设 我 们 有 一 个 单个 手柄 的 滑动 条 , 需要 使 用 表单 提交 来 将 其 值 提交 到 服务 器 。 上 再 假设 有 一 
个 名 为 slidervalue 的 隐藏 输入 框 用 来 保存 滑动 条 的 最 新 值 ， 以 便 在 外 面 表单 提交 时 ， 清 动 条 
的 值 表 现 得 就 像 是 另 一 个 表单 控件 一 样 。 我 们 可 以 在 表单 上 创建 如 下 事件 : 

Ss('form') .bind('slidechange',function(event,info)f{ 


Ss('[name="sliderVvalue"]') .val (info.value).; 


i 

下 面 是 一 个 帮助 你 理解 的 快速 练习 。 

D 练习 1 一 一 只 要 表单 中 只 有 一 个 滑动 条 , 那么 前 面 的 代码 就 可 以 很 好 地 工作 。 修改 前 面 的 
代码 使 其 可 以 在 包含 多 个 滑动 条 的 情况 下 正常 工作 。 如 何 才 能 识别 与 单个 滑动 条 控件 相 
对 应 的 隐藏 输入 元 系 呢 ? 

现在 来 给 滑动 条 添加 一 些 样式 。 
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11.2.3 ”为 滑动 条 添加 样式 的 技巧 


当 将 元 素 转变 为 滑动 条 时 ， 就 会 向 其 添加 类 ui-sliqer。 在 该 元 素 中 , 将 会 创建 <a> 元 素来 
表示 手柄 ， 每 个 <a> 元 系 剖 会 被 赋予 类 名 ui-slider-handle。 我 们 可 以 使 用 这 些 类 名 来 扩展 所 
选择 元 系 的 样式 。 





提示 000000000000000000000000 一 000000000000 
UDODUOU0OUU0UOODUOODUOUUUUUUUUUUUUUUUUUUD 
UUDUUDUU0UUUUUUUUUD 





邦 -个 将 要 被 添加 到 滑动 条 元 素 上 的 类 是 ui slider_horizontal 和 ui slider-vert= 
ical 两 者 之 一 (取决 于 滑动 条 的 方向 )。 这 是 个 很 有 用 的 钩子 (hook )， 我 们 可 以 基于 请 动 条 的 
方向 来 调整 其 样式 。 例 如 ,在 滑动 条 实验 室 你 可 以 找到 如 下 的 样式 规则 ， 用 来 根据 滑动 条 的 方 癌 
来 调整 其 尺寸 : 

.testSubject.ui-slider-horizontal { 

width: 320px; 
height: 8px; 

} 

.testSubject.ui-slider-vertical { 

height: 108px:; 
width: 8px; 
} 


testSubject 是 在 实验 室 中 用 来 识别 要 转变 为 滑动 条 元 素 的 类 名 。 

还 有 另 一 个 优雅 的 技巧 : 假设 为 了 和 站 点 其 余 元 素 的 样式 相 匹 配 , 我 们 想 让 清 动 条 手柄 看 起 
来 像 一 个 音 尾 花 。 用 一 张 合 适 的 图 片 和 一 个 CSS 的 小 戏法 ， 我 们 就 能 实现 这 个 效果 。 

打开 滑动 条 实验 室 , 重 置 所 有 元 素 , 选 中 标签 为 Use Image Handle 的 复 选 框 , 然 后 单 击 Apply。 
滑动 条 看 起 来 如 图 11-7 所 示 。 


小 
Value(s): 48 


图 11-7 用 一 张 PNG 图 片 和 一 个 CSS 小 戏法 ， 就 能 让 滑动 条 手柄 看 起 来 
像 任 何 想 要 的 效果 


下 面 来 讲解 如 何 实现 这 个 目标 。 首 先 ， 创 建 一 张 背景 透明 并 且 包 含意 尾 花 的 PNG 图 片 ， 将 
其 命名 为 handle.png， 图 片 大 小 为 18 像素 x 18 像素 。 然 后 将 下 面 的 样式 规则 添加 到 页 面 中 : 


.testSubject a.ui-slider-handle.fancy { 


background: transparent url('handle.png') no-repeat 0 0，; 
border-width: 0; 1 
} 
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最 后 ， 在 请 动 块 创建 之 后 ， 将 fancy 类 添加 到 手柄 。 

s('.testsubject .ui-slider-handle').addCclass('fancy'); 

最 后 一 个 技巧 : 如 果 你 通过 range 选项 来 创建 区 间 元 系 , 那么 可 以 使 用 ui-widget-heager 
类 来 为 其 添加 样式 。 我 们 在 实验 室 页 面 中 是 使 用 下 面 这 行 代码 来 实现 的 : 

Ui-slider .ui-widyget-header { background-color: orange; } 

滑动 条 是 一 种 很 棒 的 输入 工具 , 可 以 让 用 户 输 入 一 定 区 间 内 的 数字 值 , 而 且 还 减轻 了 我 们 和 
用 户 的 工作 量 。 下 面 来 看 男 一 个 可 以 提升 用 户 体 验 的 插件 。 


11.3 ”进度 条 


对 用 户 来 说 一 种 非常 不 友好 的 体验 是 , 耐 着 性 子 等 得 一 个 长 时 间 的 操作 , 还 不 知道 后 台 是 否 
真正 有 事情 发 生 。 虽 然 相 对 于 昌 面 应 用 程序 而 育 ， 用 户 在 茶 种 程度 上 更 习惯 于 等 待 Web 应 用 程 
序 的 处 理 结 琳 , 但 是 给 用 户 反 馈 , 告诉 他 们 数据 正在 被 处 理 , 会 让 用 户 更 加 高 兴 ， 避免 他 们 对 此 
忧心 虱 虱 。 

这 对 于 我 们 的 应 用 程序 来 说 也 是 有 好 处 的 。 让 用 户 一 边 在 界面 上 狗 狂 单 击 鼠 标 , 一 边 对 看 电 
脑 屏 莫 嘱 喷 “ 我 的 数据 怎么 还 没 出 来 !1”， 那 后 果 可 是 不 堪 设 想 的 。 由 此 产生 的 错乱 请 求 会 使 服务 
俯 次 次 ， 最 坏 的 情况 可 能 导致 后 台 代 人 码 产 生 问题 。 

进度 条 是 一 个 非常 棒 的 工具 , 它 能 够 以 相当 准确 且 确 定性 的 方式 来 告知 用 户 操作 所 完成 百 分 
比 ， 通 知 他 们 后 人 台 正 在 有 事情 发 生 。 






























































当 没 有 使 用 进度 条 的 时 候 

比 猜测 操作 完成 的 时 间 更 让 用 户 恼火 的 是 : 向 用 户 谎报 操作 的 进度 。 

只 有 能 够 基本 保证 汇报 的 准确 度 时 ， 才 应 该 使 用 进度 条 。 如 果 进 度 条 在 达到 了 10% 的 时 
候 突 然 跳 到 终点 (会 导致 用 户 认 为 操作 可 能 中 途 被 终止 了 )， 或 者 更 糟 的 是 一 一 早 在 操作 实际 
完成 前 进度 条 就 显示 进度 为 100%， 那 么 使 用 进度 条 就 不 是 一 个 好 方法 。 

如 果 你 不 能 确定 准确 的 已 完成 百分比 ,那么 代替 进度 条 的 一 个 好 方法 是 , 给 出 菜 种 提示 来 
告知 有 些 操 作 可 能 要 花 很 长 时 间 来 完成 ; 这 个 提示 可 以 是 一 个 文本 显示 “请 等 待 ， 数据 正在 处 


理 中 一 一 此 过 程 可 能 需要 几 分 钟 ……'”， 也 可 以 用 一 个 动画 来 在 进行 长 时 间 操 作 的 时 候 给 用 户 
以 正在 运行 的 错觉 。 


对 于 后 一 种 替代 方案 ， 你 可 以 访问 一 个 方便 生成 GIF 动画 的 网 站 : http://www.ajaxload.info/， 
然后 再 调整 生成 的 动画 来 匹配 你 的 主题 。 











进度 条 在 外 观 上 通常 是 矩形 ,通过 从 左 向 右 逐 渐 “ 填 充 ” 一 个 不 同 外 观 的 内 部 矩形 来 表示 操 
作 的 完成 进度 。 图 11-8 所 展示 的 进度 条 示例 表现 的 是 一 个 完成 进度 略 少 于 一 半 的 操作 。 


( | 
图 11-8 通过 从 左 回 右 “填充 ”控件 来 展示 操作 完成 百分比 的 进度 条 
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JQuery UI 提供 了 一 个 易 用 的 进度 条 部 件 , 用 来 让 用 户 知道 应 用 程序 正在 执行 所 请 求 的 操作 。 
下 面 来 看 下 使 用 进度 条 究竟 有 多 人 么 容易 。 


11.3.1 创建 进度 条 
意料 之 中 的 是 ， 进 度 条 使 用 progressbar () 方 法 来 创建 ， 该 方法 同样 遵循 我 们 早已 熟悉 


模式 。 


命令 语法 : progressbar 


progressbar (options) 


progressbar('disable') 


progressbar('enable') 


progressbar('destroy') 


progressbar('option', optionName, value) 


progressbar('value', value) 


将 包装 元 素 ( 推荐 使 用 <div> 元 素 ) 转变 为 进度 条 部 件 


参数 
options 
'disable,' 
'enable,'! 
"destroy" 


"ODELON 


optionName 


value 


!'Vvalue' 


( 对象 ) 一 个 散 列 对 象 ， 由 要 应 用 到 所 创建 进度 条 的 选项 组 成 (参见 表 11-4 ) 
(字符 串 ) 禁用 进度 条 

(字符 串 ) 重新 启用 被 禁用 的 进度 条 

(字符 串 ) 将 已 转变 为 进度 条 部 件 的 元 素 恢复 到 其 初始 状态 

(字符 串 ) 基于 剩余 的 参数 ， 在 包装 集 的 所 有 元 素 上 设置 选项 值 ， 或 者 从 包 
装 集中 的 第 一 个 元 素 ( 必须 是 进度 条 元 素 ) 获取 选项 值 。 如 果 指 定 这 个 字符 
事 作 为 第 一 个 参数 ， 则 至 少 需 要 提供 optionName 参数 

(字符 串 ) 选项 的 名 称 ( 参见 表 11-4 )， 该 选项 的 值 将 被 设置 或 者 返回 。 如 果 
提供 value 参数 ， 则 这 个 值 会 成 为 选项 的 值 。 如 果 没 有 提供 value 参数 ， 
则 已 命名 选项 的 值 会 被 返回 

(字符 串 | 数字 ) 和 'option' 一 起 使 用 时 ， 指 定 要 设置 选项 的 值 (通过 
optionName 参数 来 标识 ); 和 'value ' 一 起 使 用 时 ,指定 为 滑动 条 设置 的 0~ 
100 之 间 的 值 

(字符 事 ) 如 果 提 供 value 值 ， 则 为 进度 条 设置 该 值 ; 否则 返回 进度 条 的 当 
前 值 


长 


包装 集 ， 除 了 返回 选项 值 的 情况 
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进度 条 是 一 个 很 简单 的 部 件 ， 而 且 这 个 简单 性 也 反映 在 progressbar () 方 法 可 用 的 选项 列 
表 中 。 可 用 的 选项 只 有 两 个 ， 如 表 11-4 所 示 。 


表 11-4 jQuery UI 进度 条 的 选项 





选 项 描 述 

change ( 浮 数 ) 指定 在 进度 条 上 创建 的 函数 ， 用 来 作为 progressbarchange 事 件 的 事件 处 理 
如 。 有 关 这 个 事件 的 更 多 细节 (传人 人 处理 絮 的 信息 ) 请 参见 表 11-5 

value (数字 ) 指定 进度 条 的 初始 值 ;， 如 果 省 略 ， 则 默认 为 0 


创建 了 一 个 进度 条 后 ， 更 新 该 进度 条 的 值 就 很 简单 ， 只 需 调 用 该 方法 的 value 变 体 即 可 : 
$('#myProgressbar') .progressbar('value',75).; 

value 的 值 只 能 设置 为 0 ~ 100 之 间 的 值 ， 大 于 100 的 值 会 被 设置 为 100, 负 值 会 被 设置 为 0。 
这 些 选项 很 简单 ， 就 和 为 进度 条 所 定义 的 事件 一 样 。 


11.3.2 ”进度 条 事件 


为 进度 条 定义 的 单个 事件 如 表 11-5 所 示 。 
需要 捕获 progressbarchange 事件 ， 以 便 实 时 、 谁 确 地 显示 控件 完成 的 百分比 ， 或 者 出 于 
任何 其 他 原因 需要 通知 页 面 什 么 时 候 值 发 生 了 改变 。 


表 11-5 ”jQuery Ul 进度 条 的 事件 

















事 件 选 项 描 述 

progressbarchange ”change ”每 当 进 度 条 的 值 改变 时 调用 。 向 其 传递 两 个 参数 : 事件 实例 和 一 个 空 对 象 。 
传人 后 者 是 为 了 与 其 他 的 jQuery UI 事件 保持 一 致 ， 但 是 该 对 象 内 不 包含 任何 
计 息 


进度 条 非常 简单 ( 只 有 两 个 选项 和 一 个 事件 ) ， 因 此 没有 为 该 控件 提供 实验 室 页 面 。 相 反 ，， 
我 们 认为 应 该 创建 一 个 插件 来 在 长 时 间 操 作 进 行 的 时 候 动 态 地 更 新 进度 条 。 


11.3.3 ”自动 更 新 的 进度 条 插件 


当 触 发 了 一 个 需要 长 时 间 人 处 理 ( 处 理 时 间 可 能 超出 常人 可 接受 的 妨 耐 限度 ) 的 Ajax 请 求 ， 
而 且 我 们 可 以 准确 地 获取 完成 百分比 时 ， 通 过 显示 进度 条 来 取悦 用 户 是 一 个 好 主意 。 

下 面 来 考虑 下 完成 该 任务 所 需要 进行 的 步骤 。 

(1) 触发 一 个 长 时 间 的 Ajax 操作。 

(2) 创建 一 个 默认 值 为 0 的 进度 条 。 

(3) 每 隔 一 段 时 间 ， 触 发 额外 的 请 求 来 获取 长 时 间 操 作 的 脉冲 并 返回 完成 的 状态 。 这 个 操作 
必须 是 快速 和 准确 的 。 

(4) 使 用 返回 的 结果 来 更 新 进度 条 和 显示 完成 百分比 的 文本 。 
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听 起 来 相当 容易 ,但 是 还 有 一 些 细 市 尖 要 考虑 。 例 如 ,确保 在 正确 的 时 间 销 磺 间 隔 计 时 兹 。 

1. 定义 自动 更 新 进度 条 部 件 

由 于 这 个 部 件 是 很 常用 的 , 并 且 还 有 一 些 重要 细 市 需要 考虑 在 内 ,因此 非常 适合 创建 一 个 用 
来 处 理 上 述 事情 的 插件 。 

我 们 称 该 插件 为 目 动 更 新 进度 条 ， 其 方法 autoProgressbar () 的 定义 如 下 所 示 。 








命令 语法 : autoProgressbar 


autoProgressbar (options) 
autoProgressbar('stop') 
autoProgressbar('destroy') 


autoprogressbar('value', value) 


将 包装 元 素 ( 推荐 使 用 <div> 元 素 ) 转变 为 进度 条 部 件 


options ( 对 象 ) 一 个 散 列 对 象 ,由 要 应 用 到 所 创建 进度 条 的 选项 组 成 ( 参见 表 11-6 ) 

'Stop， ( 字符 事 ) 停止 检查 自动 更 新 进度 条 部 件 的 完成 状态 

'destroy ( 字符 事 ) 停止 自动 更 新 进度 条 部 件 并 恢复 已 转变 为 进度 条 部 件 的 元 素 的 
初始 状态 

'value ， (字符 串 ) 如 果 提 供 value， 则 为 进度 条 设置 该 值 ; 否则 返回 进度 条 的 当 
前 值 

value (字符 串 | 数字 ) 和 'value' 一 起 使 用 时 , 指定 为 滑动 条 设置 的 0~100 之 间 
的 值 

返回 值 


包装 集 ， 除 了 返回 选项 值 的 情况 


为 该 插件 定义 的 选项 如 表 11-6 所 示 。 


表 11-6 autoProgressbar() 插 件 方法 的 选项 
选 项 描 述 
BulseUrl (字符 串 ) 指定 服务 器 端 资源 的 URL， 用 来 检查 希望 监听 的 后 端 操作 的 脉冲 。 如 果 省 略 该 选项 ， 
则 此 方法 不 执行 操作 
来 自 于 该 资源 的 啊 应 必须 由 范围 在 0 ~ 100 的 数字 值 表示 ， 用 来 表示 被 监听 操作 的 完成 百分比 
pulseData (对 和 象 ) 应 当 传 人 由 pulseUr1 选 项 所 获取 的 任何 数据 。 如 果 省 略 ， 则 不 发 送 数据 
interval (数值 ) 两 次 脉冲 之 间 的 间隔 时 间 ( 以 毫秒 为 单位 ) 。 默 认 值 是 1000 ( 1 秒 ) 
change (函数 ) 要 创建 为 progressbarchange 事 件 处 理 需 的 函数 











下 面 就 来 实现 这 些 内 容 。 
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2. 创建 自动 更 新 进度 条 

与 往常 一 样 ， 我 们 将 会 从 该 方法 的 架构 人 手 ， 这 个 架构 遵循 在 第 7 童 中 阐述 的 规则 和 实践 。 
(如 采 下 面 的 代 但 看 起 来 有 点 生 玻 ， 请 复习 第 7 章 。 ) 在 文件 jquery.jqia2.autoprogressbar.js 中 编 
写 了 如 下 架构 代码 : 


(function(S$)t 
S$.fn.autoProgressbar = function(settings,valjue) { 


//UUUUUUUD 


return this: 


下 











人 

我 们 要 做 的 第 一 件 事情 是 , 检查 第 一 个 参数 是 否 为 字符 串 。 如 果 第 一 个 参数 是 字符 串 ， 则 使 
用 该 字符 串 来 决定 要 运行 的 方法 。 如 果 不 是 字符 串 ， 则 假定 它 是 一 个 散 列 选项 。 因 此 我 们 添加 了 
如 下 的 条 件 结构 : 


if (typeof settings === "string") { 


/0000050 


else { 


/0U000000 
| 














处 理 选 项 是 自动 更 新 进度 条 插件 的 主要 内 容 ， 因 此 我 们 先 从 处 理 el se 部 分 的 代码 着 手 。 首 
和 完 ， 将 用 户 提 供 的 选项 和 默认 的 选项 集合 并 ， 如 下 所 示 : 
settings = $.extendl(t 
PulseUrl: null, 
PulseData: nullil, 
interval: 1000, 
change: null 
,Settings| |{}); 
if (settings.pulseUrl == null) return this; 


和 前 面 已 开发 的 插件 一 样 , 我 们 使 用 $ .extend() 函数 来 合并 不 同 的 对 象 。 还 需要 注意 的 是 ， 
我 们 习惯 性 地 继续 列 出 默认 散 列 中 的 所 有 选项 ， 即 使 该 选项 的 值 为 nu11。 这 是 一 个 理想 的 地 方 
来 观察 插件 支持 的 所 有 选项 。 

在 合并 以 后 ， 如 果 没 有 指定 pulseUrl 选项 ”， 则 直接 返回 不 进行 任何 操作 ( 如 果 不 知道 如 
何 访问 服务 融 的 话 ， 也 做 不 了 什么 事情 ) 。 

现在 真正 是 创建 进度 条 部 件 的 时 候 了 : 

this.progressbar({value:0,change:settings.change}); 

请 记 住 ,在 插件 内 ，this 是 对 包装 集 的 引用 。 我 们 在 这 个 包 效 集 上 调用 jQuery UI 进度 条 方 
法 ， 指 定 初 始 值 为 0， 并 且 传 人 用 忆 提 供 的 任何 改变 处 理 做 。 





oo 



































OQ 这 个 代码 不 严谨 ， 如 果 指 定 pulseUrl 为 undefined 或 空 字 符 串 的 话 ， 需 要 做 相同 的 人 处理， 因此 这 段 代码 最 好 


这 从 写 > if(isettings.pulseUrl) return thigs;, 
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现在 来 看 有 趣 的 部 分 。 对 于 包 沪 集中 的 每 个 元 素 ( 包 沪 集中 有 可 能 只 有 一 个 元 系 , 但 是 为 什 
么 要 给 上 自己 添加 限制 呢 ? ) ,我 们 希望 使 用 已 提供 的 pulseUrl 来 局 动 一 个 间 隅 计时 各 ,以 便 检 
查 长 时 间 操 作 的 状态 。 用 来 实现 该 任务 的 代码 如 下 所 示 : 














this.each (function()t 
var bars = S(this); 6 遍历 包装 集 .9 在 部 件 上 保存 间隔 计 
bars .data ( 时 器 句柄 
'autoProgressbar-interval', 
window, setInterval (functiont()t 3 启动 间隔 计时 器 
$5] 
url: settings.pulseUrl, 6 触发 Ajax 请 求 
data: settings.pulseData, 
global: false, 接收 完成 状态 
dataType: 'json', 了 
success: function(value)t 
if (value != null) bars.autoProgressbar('value',value); 
if (value == 100) bars.autoProgressbar('stop').; 


} 
yy 
},settings.interval)):; 


}); 

这 段 代码 处 理 的 事情 很 多 ， 因 此 我 们 依次 讲解 每 一 个 步骤 。 

我 们 想 让 每 个 将 被 创建 的 进度 条 都 拥有 上 自己 的 间隔 计时 希 。 为 什么 用 户 会 想 要 创建 多 个 目 动 
更 新 进度 条 超出 了 我 们 的 职责 范围 , 但 jQuery 的 方式 是 让 每 个 包装 元 素 都 拥有 自己 的 操作 范围 。 
我 们 使 用 each () 方 法 来 单独 处 理 每 个 包装 元 素 。 

为 了 可 该 性 ， 也 为 了 能 够 在 稍 后 创建 的 财 包 中 使 用 ， 我 们 将 包 闭 元 妹 保 存在 par$ 变 量 中 。 

然后 启动 则 隅 计时 右 , 但 是 不 要 忘 了 稍 后 停止 计时 如 。 因 此 和 需要 将 识别 计时 奋 的 句柄 存储 到 
稍 后 容易 获取 的 地 方 。jQuery 的 data() 方 法 在 这 里 就 派 上 用 场 了 @@， 我 们 使 用 该 方法 来 将 计时 
伪 的 句柄 存储 到 bar J | 存储 的 名 称 为 autoProgressbar-interval 眉 

调用 JavaScript 的 window.setInterval () 也 数 启 动 该 计时 融合 , 向 这 个 也 数 传递 一 个 要 在 
计时 带 每 次 计时 的 时 候 执行 的 内 联 聘 数 ， 以 及 从 interval 选项 获取 的 时 间 间 陋 值 。 

在 计时 需 回 调 内 部 , 我们 向 pulseUrl 选项 所 提供 的 URL 发 起 (市 有 pulseData 提供 的 数 
据 ) Ajax 请 求 @。 我 们 也 关闭 了 全 局 事件 ( 这 些 请 求 是 在 幕后 发 生 的 , 我 们 不 希望 由 于 触发 页 面 
一 无 所 知 的 全 局 Ajax 事件 使 页 面 混乱 不 堪 )， 并 指定 返回 的 啊 应 体 为 JSON 数据 。 

最 后 ， 在 请 求 的 success 回调 函数 中 个 ， 我 们 使 用 完成 百分比 更 新 进度 条 ( 此 百分比 作为 
啊 应 体 返 回 并 被 传人 回调 )。 如 采 该 值 达 到 100， 表 明 操 作 已 经 完成 ,我 们 通过 调用 stop 方法 来 
停止 计时 句 。 

在 此 之 后 ， 实 现 剩余 方 法 就 会 很 简单 。 在 高 层次 条 件 语 句 的 i£ 部 分 ( 用 来 检查 第 一 个 参数 
是 否 为 字符 串 的 那 部 分 代码 )， 编 写 如 下 代码 : 









































对 字符 串 值 进行 条 件 
Switeh (Settinges) 7 切换 实现 stop 方法 
Case 'stop': 


this.each (function()t 
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window.clearIinterval ($s (this) .data('autoProgressbar-interval')) 

as 

break; 实现 value 方法 
case 'value': < 

if (value == null) return ths.Drogresspbpar(' value') : 

this.progressbar('value',value).; 

break; 实现 destroy 方法 
case 'destroy': 加 

this.autoPprogressbar('stop').; 


Ethie Drooresebart dsstrov 对 于 不 支持 的 字符 串 

Break; 什么 都 不 做 
default: 

break; 


] 

在 这 个 代码 片段 中 ， 我 们 根据 settings 参数 中 的 字符 串 切 换 到 不 同 的 处 理 算法 人 @， 包括 
stop、vValue 或 destroy 其 中 之 一 。 

对 于 stop 方法 ,我 们 希望 消除 为 包装 集中 元 素 创 建 的 所 有 间 陋 计时 需 仿 。 我 们 获取 计时 器 
句柄 ( 此 句 林 被 存储 为 元 又 的 数据 ), 并 把 它 传人 window.clearInterval () 方 法 来 停止 计时 郝 。 

如 果 指 定 方法 为 value， 则 将 此 值 传 人 进度 条 部 件 的 value 方法 。 

当 指定 为 destroy 时 , 我 们 希望 停止 计时 融 , 因此 调用 自身 的 stop 方法 (为 什么 要 复制 粘 
贴 相同 的 代码 两 次 呢 ? )， 然 后 销毁 进度 条 。 

这 样 就 大 功 告 成 了 ! 注意 每 当 从 方法 的 调用 返回 时 , 我 们 是 如 何 返 回 包装 集 以 便 插 件 可 以 参 
与 到 jQuery 方法 链 的 〈 就 像 任何 其 他 的 可 链 式 调用 的 方法 一 样 )。 

这 个 插件 完整 的 实现 可 以 在 文件 chapterll/progressbars/jquery.jqia2.autoprogressbar.js 中 找到 。 

下 面 把 注意 力 转向 如 何 测试 我 们 的 插件 。 

3. 测试 目 动 更 新 进度 条 插件 

chapterl11/progressbars/autoprogressbar-test.html 包含 了 一 个 使 用 新 插件 的 测试 页 面 , 用 来 
监听 一 个 长 时 间 运 行 的 Ajax 操作 的 完成 进度 。 为 了 市 省 篇 幅 ， 我 们 不 会 列 出 那个 文件 中 的 每 一 
行 代 码 ， 而 是 重点 人 研究 插件 相关 的 部 分 代码 。 

首先 ， 来 看 下 创建 DOM 结构 的 标签 : 


<div> 
<button type="button" id="startButton" class="green90x24">Start</button> 
(starts a lengthy operation,) 

</div> 

















<div> 

<div id="progressBar"></div> 

<span id="valueDisplay">&mdash;</span> 
</div> 


<div> 
<button type="button" id="stopButton" class="green90x24">Stop</button> 
(stops the progress bar pulse checking,) 

</div> 


这 些 标 签 创 建 了 4 个 基本 元 素 : 
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口 一 个 用 来 启用 长 时 间 操 作 的 Start 按钮 ， 并 使 用 我 们 的 插件 来 监听 它 的 进度 ; 
口 一 个 将 要 被 转变 为 进度 条 的 <div>; 

口 一 个 用 来 显示 完成 百分比 文本 的 <span>; 

D 一 个 用 来 停止 进度 条 监听 长 时 间 操作 的 Stop 按钮 。 

测试 页 面 运行 中 的 效果 如 图 11-9 所 示 。 


MAMAAO 





[ jQuery in Action, 2nd Editio! %/ |iAuto-Progress Bar Test x We 


See 
一 











f 和 已 | 省 | 家 htp://localhost:8080/jqia2/chapterll/progressbars/autoprogressbar-test.html bp Dr > 





Auto-Progressbar Test 


Start | (starts a lengthy operation) 


62% 


Stop | (stops the progress bar pulse checking) 





图 11-9 ”自动 更 新 进度 条 正在 监听 服务 带 端 长 时 间 运 行 的 操作 


注意 DDODDODD00000000 AiaxUUDO0UOO0OO0O0O0UOD0800000000Dromcat 
UOUO0O00 URLODOD 80800U0U000D00 http:/www.bibeault.org/jqia2/chapterl1/ 
progressbars/autoprogressbar-test.html [| [DODDDDDD00 











为 Start 按钮 添加 行为 是 本 页 面 中 最 重要 的 操作 ， 这 是 通过 如 下 脚本 实现 的 : 


$('#startButton') .click (function ()f{ 开始 长 时 间 运 行 的 处 理 
$s.post('/jJ9gqia2/lengthyOperation',function()t -0 
$('#progressBar') 
.autoProgressbar('stop') © 使 操作 结 
.autoProgressbar('value',100).， 
Ios 
$('#¥progressBar') .autoProgressbar(t 
PulseUrl: '/jJgqia2/checkProgress', 68 创建 监听 进度 条 
change: function(event) { 
S$S('#¥valueDisplay') .texts$ ('#progressBar') .autoProgressbar ('value') + 


}); 

在 Start 按钮 的 单 击 处 理 带 中 ,我们 做 了 两 件 事情 : 开始 长 时 间 操 作 和 创建 自 定 更 新 进度 条 。 
我 们 癌 URL /jqia2/lengthyOperation 发 起 请 求 ， 这 个 URL 是 用 来 标识 在 服务 兢 端 运行 的 、 大 
约 需要 12 秒 来 完成 的 处 理 @@。 稍 后 会 谈 到 success 回调 函数 ， 不 过 首先 来 看 看 自动 更 新 进度 条 


的 创建 过 程 。 
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我 们 使 用 用 来 标识 服务 需 端 资源 的 值 ( /jqia2/checkProgress ) 来 调用 新 插件 合 ， 这 个 资源 用 
来 检查 长 时 间 运 行 操作 的 状态 并 人 返回 完成 百分比 作为 啊 应 。 如 何 完 成 上 述 操 作 完 全 取决 于 Web 
应 用 程序 后 端 代码 ， 而 这 个 话题 超出 了 本 次 讨论 的 范围 。( 在 本 示例 中 ,使 用 的 是 两 个 独立 的 小 
服务 程序 ( servlet )， 使 用 服务 程序 会 话 来 持续 跟踪 进度 。) 为 进度 条 准备 的 改变 处 理 器 被 用 来 更 
新 屏幕 上 显示 的 完成 值 。 

现在 回 到 为 长 时 间 运 行 操 作 所 准备 的 成 功 处 理 器 个 。 当 操作 完成 的 时 候 , 我 们 希望 做 两 件 事 
情 : 停止 进度 条 ,确保 进度 条 的 值 反 映 了 操作 已 经 全 部 完成 。 首 先 调用 插件 的 stop 方法 ， 紧 跟 
看 调用 value 方法 ， 就 可 以 很 容易 地 完成 这 个 任务 。 进 度 条 的 改变 处 理 带 也 会 相应 地 更 新 文本 
值 的 显示 。 

我 们 已 经 使 用 进度 条 创建 了 一 个 真实 可 用 的 插件 。 下 面 就 来 讨论 一 些 为 进度 条 添加 样式 的 
技巧 。 


11.3.4 ”为 进度 条 添加 样式 


如 果 把 一 个 元 素 转变 为 进度 条 , 会 回 其 添加 类 名 ui-progressbar, 并 问 此 元 素 内 用 来 描述 
进度 条 值 的 <div> 元 素 添 加 类 名 ui -progressbar-value。 可 以 使 用 这 些 类 名 来 应 用 CSS 规则 ， 
从 而 扩展 这 些 元 素 的 样式 (我们 认为 合适 的 样式 )。 

例如 ， 你 可 能 想 使 用 一 个 有 趣 的 图 案 而 不 是 主题 采用 的 纯色 调 来 填充 内 部 元 素 的 背景 : 


.Ui-progressbar-value ({ 






































background-image: url (interesting-pattern.png); 


} 

你 也 可 以 提供 一 个 动画 GIF 作为 背景 图 片 ， 使 得 进度 条 看 起 来 更 加 生动 。 

进度 条 可 以 让 用 户 了 解 操 作 人 处 理 进度 ,从 而 使 其 心情 平静 。 下 一 步 ,我 们 通过 让 用 户 在 查找 
想 要 的 东西 时 减少 用 户 的 输入 来 使 他 们 高 兴 。 


11.4 自动 完成 部 件 


缩写 词 TMI 现在 代表 “ 太 多 信息 ”( too much information )， 在 谈话 中 它 经 党 被 用 来 指 说 话 者 
披露 了 对 听众 来 说 有 点 过 于 私密 的 细节 。 在 Web 应 用 领域 ,“ 太 多 信息 ” 指 的 不 是 信息 的 性 质 ， 
而 是 信息 的 数量 。 

尽管 Web 上 有 大 量 可 用 信息 是 一 件 好 事 ， 但 是 信息 真 的 可 能 会 太 泛滥 一 一 在 大 量 数据 面前 
我 们 很 容易 就 会 不 堪 重 负 。 另 外 一 个 描述 这 种 现象 的 常用 说 法 是 “从 消防 水 龙头 喝 水 ”。 

在 设计 用 户 界 面 时 ， 特 别 是 为 有 能 力 获 取 大 量 数据 的 Web 应 用 程序 设计 用 户 界 面 ， 一 个 重 
要 的 原则 是 避免 回 用 户 提 供 太 多 的 数据 或 者 太 多 的 选择 。 当 呈现 庞大 的 数据 集 时 〈 例 如 报表 数 
据 )， 好 的 用 户 界面 会 给 予 用 户 一 些 工 具 ， 以 便 能 获取 有 用 且 有 益 的 数据 。 人 例如， 过滤 硕 可 以 被 
用 来 痛 选 择 和 用 户 无 关 的 数据 , 对 庞大 的 数据 集 进行 分 页 以 便 以 多 于 查看 的 块 来 呈现 数据 。 这 也 





















































中 意 指 信 息 量 太 多 而 无 法 处 理 。 
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正 是 DVD Ambassador 示例 所 采取 的 方式 。 

作为 示例 ， 下 面 来 考虑 一 个 将 会 在 本 市 使 用 的 数据 集 : 一 个 DVD 标题 的 列表 ， 这 是 一 个 包 
含 937 个 标题 的 数据 集 。 它 是 一 个 庞大 的 数据 集 , 但 仍然 是 更 加 庞大 的 数据 集 (例如 曾经 发 行 过 
的 所 有 DVD 列表 ) 的 一 小 部 分 。 

假设 我 们 希望 名 用 户 呈 现 这 个 列表 ， 让 他 们 选择 喜欢 的 DVD。 可 以 创建 一 个 HTML 
<select> 元 素 让 用 户 从 中 选择 一 个 标题 ， 但 这 对 用 户 来 说 不 太 友 好 。 大 部 分 的 可 用 性 指南 都 推 
荐 每 次 向 用 户 呈 现 的 选择 不 要 超过 一 打 ， 更 不 用 说 数 百 个 选择 了 ! 先 撤 开 可 用 性 问题 不 谈 ， 每 次 
都 向 ( 可 能 有 潜在 的 数 百 、 数 千 ， 其 至 数 以 百 万 的 用 户 访问 的 ) 页 面 发 送 如 此 庞大 的 数据 集 是 否 
现实 ? 

jQuery UI 使 用 自动 完成 部 件 来 帮助 我 们 解决 这 个 问题 ， 这 个 控件 和 <select> 下 拉 列 表 的 大 
部 分 行为 类 似 ， 但 是 它 会 过 滤 选 择 项 ， 只 呈现 匹配 用 户 输 入 控件 关键 字 的 那些 选项 。 


11.4.1 创建 自动 完成 部 件 


jQuery 的 自动 完成 部 件 增强 了 现 有 的 <input> 文 本 元 素 , 用 来 获取 并 呈现 包含 可 能 选择 项 的 菜 
单 ， 以 匹配 用 户 在 文本 字段 中 输入 的 任意 文本 。 匹配 选 择 项 的 内 容 取 决 于 创建 部 件 时 所 提供 的 选 
项 ,事实 上 , 上 自动 完成 部 件 可 以 提供 灵活 的 选择 列表 , 还 可 以 基于 用 户 提供 的 数据 科 选 这 个 列表 。 
autocomplete () 方 法 的 场 法 如 下 所 示 。 












































下 去 : autocomplete 


autocomplete (options) 
autocomplete('disable') 
autocomplete('enable') 
autocomplete('destroy') 
autocomplete('option', optionName, value) 
autocomplete('search', value) 
autocomplete('close') 
autocomplete('widget') 

将 包装 集中 的 <input> 元 素 转 变 为 自动 完成 控件 


options ( 对象 ) 一 个 散 列 对 象 ， 由 要 应 用 到 包装 集中 元 素 的 选项 组 成 (参见 表 
11-7 )， 从 而 使 这 些 元 素 成 为 自动 完成 控件 

‘disable' (字符 串 ) 禁用 自动 完成 控件 

'enable' (字符 串 ) 重新 启用 被 禁用 的 自动 完成 控件 

‘destroy ( 字符 事 ) 使 任何 转变 为 自动 完成 控件 的 元 素 恢 复 到 其 初始 状态 
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' option,' (字符 串 ) 基于 剩余 的 参数 ,设置 包装 集中 所 有 元 素 的 选项 值 ， 或 者 获 
取 和 包装 集中 第 一 个 元 素 ( 必须 是 自动 完成 元 素 ) 的 选项 值 。 如 果 指 定 这 
个 字符 串 作 为 第 一 个 参数 ， 则 至 少 需 要 提供 optionName 参数 


optionName ( 字符 囊 ) 要 设置 或 返回 的 选项 名 称 的 值 ( 参见 表 11-7 ), 如 果 提 供 value 
参数 ， 则 这 个 值 就 成 为 选项 的 值 。 如 果 没 有 提供 value 参数 ， 则 返回 已 
命名 选项 的 值 

value ( 对象 ) 和 'option' 一 起 使 用 时 ， 指 定 要 设置 选项 的 值 (通过 
optionName 参数 来 标识 ); 和 'search' 一 起 使 用 时 ， 指 定 为 要 搜索 的 
术语 

Searchn (字符 串 ) 使 用 指定 的 value (如 果 value 值 存 在 的 话 ， 否 则 使 用 控件 
当前 的 内 容 作 为 value 的 值 ) 触发 一 个 搜索 事件 。 提 供 空 字符 串 来 查看 
所 有 可 能 项 的 菜单 " 

CjJose (字符 串 ) 如 果 自 动 完成 菜单 处 于 打开 状态 ， 则 关闭 此 菜单 

'widget' (字符 串 ) 返 回 自动 完成 元 素 ( 也 即 是 市 有 ui-autocomplete 类 名 的 元 素 ) 

返回 值 


包装 集 ， 除 了 返回 选项 、 元 素 或 者 搜索 结果 的 情况 








对 于 这 样 一 个 看 起 来 很 复杂 的 目 动 完成 控件 ， 可 用 的 选项 列表 却 相 当 少 ， 如 表 11-7 所 述 。 


表 11-7 jQuery UI 自动 完成 部 件 的 选项 



































选 项 描 述 室 页 面 中 

change ( 国 数 ) 指定 在 自动 完成 部 件 上 创建 的 函数 ， 用 来 作为 autocompletechange v 
事件 的 事件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 需 的 信息 ) 请 参见 表 11-8 

close ( 隐 数 ) 指定 在 自动 完成 部 件 上 创建 的 函数 ， 用 来 作为 autocompleteclose 事 v 
件 的 事件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 ( 传 入 处 理 器 的 信息 ) 请 参见 表 11-8 

delay (数值 ) 在 尝试 获取 匹配 的 值 ( 由 source 选 项 指定 ) 之 前 等 待 的 毫秒 数 。 它 可 v 
以 在 发 起 搜索 之 前 给 用 户 输入 更 多 的 字符 的 时 间 , 以 便 在 获取 非 本 地 数据 时 减少 对 
服务 器 的 压力 

如 果 省 略 ， 则 默认 是 300( 也 即 是 0.3 秒 ) 
disabled (布尔 ) 如 果 指 定 为 crue， 则 部 件 最 初 是 被 禁用 的 
focus ( 也 数 ) 指定 在 自动 完成 部 件 上 创建 的 函数 ， 用 来 作为 autocompletefocus 事 V 


件 的 事件 处 理 锅 。 有 关 这 个 事件 的 更 多 细节 《传人 处 理 需 的 信息 ) 请 参见 表 11-8 


J 这 个 描述 不 严谨 ， 只 有 在 创建 自动 完成 部 件 时 指定 选项 minLength 值 为 0( 默 认为 1 )， 才 能 使 用 


autocomplete('search'，'') 来 显示 所 有 项 的 菜单 。 
@) 原文 错误 ， 指 定 autocomplete 方法 的 第 一 个 参数 为 'search' 时 ,返回 的 结果 仍然 是 包装 集 ， 而 不 是 搜索 
结果 。 
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( 绪 ) 
、 i 是 否 在 实验 
选 项 描 述 室 页 面 中 
minLength (数值 ) 在 尝试 获取 匹配 的 值 ( 由 source 选 项 指定 ) 之 前 必须 输入 的 字符 数 。 v 
它 可 以 在 提供 的 字符 不 足以 将 集合 消减 到 合理 的 水 平时 ， 防 止 呈现 过 大 的 集合 
默认 值 是 1 个 字符 
open ( 孔 数 ) 指定 在 上 自动 完成 部 件 上 创建 的 函数 ， 用 来 作为 autocompleteopen 囊 v 
件 的 事件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 器 的 信息 ) 请 参见 表 11-8 
search ( 也 数 ) 指定 在 自动 完成 部 件 上 创建 的 函数 ， 用 来 作为 autocompletesearch v 
事件 的 事件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 ( 传 入 处 理 器 的 信息 ) 请 参见 表 11-8 
select ( 也 数 ) 指定 在 自动 完成 部 件 上 创建 的 函数 ， 用 来 作为 autocompleteselect v 
事件 的 事件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 ( 传 入 处 理 器 的 信息 ) 请 参见 表 11-8 
source (字符 串 | 数 组 | 函数 ) 指定 获取 匹配 输入 数据 的 方式 。 必 须 为 此 选项 提供 一 个 值 ， V 





否则 不 会 创建 自动 完成 部 件 . 这 个 值 可 以 是 返回 匹配 数据 的 服务 需 资 源 URL 的 字符 
串 ， 提 供 匹 配 值 的 本 地 数据 的 数组 ， 也 可 以 是 提供 匹配 值 的 通用 回调 函数 


有 关 这 个 选项 的 更 多 信息 请 参阅 11.4.2 市 


你 可 能 已 经 猪 到 了 ,我们 提供 了 自动 完成 部 件 实 验 室 页 面 (参见 图 11-10 )。 请 在 浏览 希 中 打 
开 文 件 chapterll/autocompleterslab.autocompleters.htm1， 并 在 复习 选项 的 时 候 跟 着 做 练习 。 








HO 


y [jQuery in Action, 2nd Editior x [ujQuery Ul Autocompleters lL» x (0) 


二 富 人 GI 省 | 富 http://localhost:8080/jqia2/chapterll /autocompleters/lab.autocompleters.html Pb | DB- ££- 





: jQuery UI Autocompleters Lab 





| Button options 
delay: 


minLength: @ unspecified OQ1 OQ2 O3 O04 Os5 
source: © local string array © local object array @ URL © callback 


Apply | Disable | Enable | Reset | 
Executed commands: 
$('.testSubject').autocomplete({source:'/jqla2/getMovies'}); 


[The D | 
i The Da Vinci Code 
WY The Day After Tomorrow 
| | The Day of the Jackal earch, {} 
' The Day of the Triffids ypen, {} 


The Day the Earth Stood Still 
The Devil Wears Prada 

















图 11-10 jQuery UI 有 目 动 完成 实验 室 展示 了 如 何 随 着 输入 数据 的 增多 而 减少 大 型 结果 集 的 数量 
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注意 UUU0OD0O00D0sourceU00O URLOOOUOOOOOOOO0O Aiax0OO0OO0O0OO0O00 
sDDUDDOUUDTomcatdUUUUUDU URLOUD 80800U000U0U00U000 
http://www.bibeault.org/jqia2/chapterl1/autocompleters/lab.autocompleters.html [| DDDUU0 


UUUUD 


除了 source 选项 ， 其 余 的 选项 都 还 算是 不 言 自明 的 。 请 保持 source 选项 的 默认 设置 ,使 
用 目 动 完成 实验 室 页 面 来 观察 所 生成 的 事件 以 及 minLength 和 delay 选项 的 行为 ,理解 这 些 选 
项 的 用 法 。 

下 面 来 看 看 如 何 才 能 为 这 个 部 件 提 供 数 据 源 。 


11.4.2 ”自动 完成 部 件 的 数据 源 


目 动 完成 部 件 为 我 们 提供 了 很 大 的 灵活 性 来 为 用 户 输 入 的 任何 数据 提供 匹配 的 数据 值 。 

目 动 完成 部 件 的 数据 源 表现 为 数组 的 形式 ， 数 组 中 的 每 一 项 有 两 个 属性 ， 如 下 所 示 。 

口 一 个 用 来 呈现 真实 值 的 value 属性 。 它们 是 和 用 户 输入 控件 的 值 进行 匹配 的 字符 串 ", 并 
且 当 一 个 沫 单项 被 选中 时 它们 的 值 被 插 人 到 控件 中 。 

口 一 个 用 来 呈现 值 的 label 属性 ， 通常 以 缩 上 略 的 形式 表示 。 它 们 是 显示 在 目 动 完成 采 单 中 
的 字符 串 ， 并 且 不 参与 默认 的 匹配 算法 ”。 

这 些 数据 可 以 来 日 各 种 不 同 的 源头 。 

对 于 数据 集 相当 小 的 情况 (一 打 ， 不 超过 一 百 个 )， 可 以 将 数据 作为 局 部 数组 来 提供 。 下 面 

的 示例 来 自 于 自动 完成 实验 室 ， 它 提供 了 使 用 用 户 名 作为 标签 、 完 整 的 名 称 作为 值 的 候选 数据 。 


Var sourceObjects = | 












































{ label: 'bear', value: 'Bear Bibeault'}, 

{ label: 'yehuda', value: 'Yehuda Katz'}, 

{ label: 'genius', value: 'Albert Einstein'}, 

{ label: 'honcho', value: 'Pointy-haired Boss'}, 
{ label: 'comedian', value: 'Charlie Chaplin'} 


| 
在 显示 的 时 候 ， 标签 ( 也 就 是 用 户 名 ) 是 显示 在 目 动 完成 菜单 中 的 值 ， 但 匹配 是 在 值 ( 也 就 
是 完整 的 名 称 ) 上 进行 的 ”， 并 且 在 选择 某 个 菜单 项 的 时 候 ， 这 个 值 会 被 插入 到 控件 中 。 





QD 作者 在 此 犯 了 一 个 严重 的 错误 ， 以 至 于 后 面 对 label 和 value 的 描述 都 不 完全 正确 。 
正确 的 说 法 是 : label 会 和 用 户 输入 的 值 进行 匹配 并 显示 在 沫 单 中 ; 当 聚 焦 或 选择 某 个 沫 单项 时 ,value 的 值 会 
被 搬入 到 <input> 元 素 中 。 这 种 说 法 不 仅 可 以 从 实验 室 页 面 中 得 到 验证 ， 而 且 可 以 从 目 动 完成 部 件 的 源 代 码 中 看 
出 端倪 : 
return matcher.test( value.label || value.value || value ); 
很 明显 ， 默 认 的 匹配 逻辑 是 将 用 户 的 输入 值 和 label 属性 进行 比 对 ， 而 非 作 者 一 再 强调 的 value 属性 。 

@) 原文 错误 ， 如 J 所 述 。 

(3) 原文 错误 ， 如 (所 述 。 
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当 我 们 想 在 菜单 中 使 用 短 格式 的 值 来 呈现 大 量 数 据 时 , 这 种 方式 非常 有 用 , 但 是 对 于 很 多 情 
况 ( 可 能 是 大 部 分 情况 )， 标 签 和 值 将 会 是 相同 的 。 对 于 这 些 常见 的 情况 ，jQuery UI 允许 指定 数 
据 为 字符 串 数 组 ， 并 将 数组 中 的 字符 串 值 同 时 作为 标签 和 值 。 











提示 DDD00000000000 iabel0U valveD0D00000000000000000 
[LU labell[l| valuel| 





为 了 使 部 件 能 正常 工作 ， 提 供 的 数据 项 不 必要 按照 特定 的 顺序 排列 (例如 分 类 数据 )， 并且 
显示 在 菜单 中 匹配 的 数据 项 会 按照 它们 在 数组 中 出 现 的 顺序 排列 。 

当 使 用 本 地 数据 时 ， 匹配 算法 是 : 任何 包含 用 户 输入 数据 ( 被 称 为 术语 ) 的 候选 值 都 被 认为 
是 匹配 的 。 如 果 这 不 是 你 想 要 的 ( 假设 你 只 希望 匹配 以 术语 开始 的 值 )， 也 不 用 担心 。 还 有 两 种 
更 加 通用 的 方式 来 提供 数据 源 ， 可 以 让 我 们 能 够 完全 控制 匹配 算法 。 

对 于 第 一 种 方案 ， 我 们 可 以 指定 数据 源 为 服务 融资 源 URL， 其 返回 的 响应 包含 匹配 术语 的 
数据 值 ， 这 个 术语 是 作为 名 为 term 的 请 求 参 数 传递 给 服务 器 资源 的 。 返 回 的 数据 应 该 是 一 个 
JSON 啊 应 ， 其 求 值 结果 是 所 文 持 的 本 地 数据 格式 中 的 一 种 ， 通 常 是 字符 串 的 数组 。 

注意 ,source 的 这 种 变 体 执行 搜索 并 只 返回 匹配 的 元 素 ( 不 会 对 返回 的 数据 做 进一步 处 理 )。 
无 论 返 回 什 么 样 的 结果 ， 它 们 都 会 被 原原本本 地 显示 在 自动 完成 的 菜单 中 。 

当 需 要 最 大 程度 的 灵活 性 时 ， 可 以 使 用 另 一 种 方案 : 提供 一 个 回调 画 数 作为 source 选项 ， 
在 部 件 需要 数据 的 时 候 会 调用 这 个 回调 函数 。 在 调用 回调 函数 时 向 其 传人 以 下 两 个 参数 。 

口 拥有 单个 属性 term ( 包含 匹配 的 术语 ) 的 对 象 。 

口 将 要 调用 的 回调 函数 ， 向 其 传递 匹配 的 结果 以 显示 荣 单 。 这 组 结果 可 以 是 接受 本 地 数据 

的 任意 格式 ， 通 常 是 字符 串 数 组 。 

这 种 回调 机 制 提供 了 最 大 程度 的 灵活 性 , 因为 我 们 可 以 使 用 任何 机 制 和 算法 将 术语 转变 为 匹 

配 的 元 素 集 。 使 用 source 的 这 种 变 体 的 代码 框架 如 下 所 示 : 


$('#¥control') .autocomplete (1{ 
source: function(request,response) { 















































Var term = request.term; 
var results; 


/DDUUUUUUUUU 


response (results).; 
} 
I 


和 source 的 URL 变 体 一 样 ， 结 果 应 该 只 包含 那些 将 要 显示 在 目 动 完成 菜单 中 的 值 。 
舌 在 自动 成 实验 中 练习 便 用 source 沈 硕 。 在 实验 宣 中 ， 有 关 不 同 的 souree 选项 有 以 下 
点 需要 注意 。 
口 “local string” 选 项 提供 了 包含 79 个 值 的 列表 ， 所 有 的 值 都 是 以 字母 E 开 头 。 
号 “local object” 选 项 提供 了 一 个 短 列表 ， 其 中 包含 用 户 名 作为 标签 、 完 整 的 名 称 作为 值 的 1 
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对 象 。 注 意 ， 匹 配 是 发 生 在 标签 上 而 不 是 值 上 *。( 提示 : 输入 字母 b 看 看 。) 

口 对 于 URL 变 体 ， 后 台 资 源 只 会 匹配 以 术语 开头 的 值 。 与 提供 本 地 值 的 情况 (术语 可 以 显 
示 在 字符 串 中 的 任何 位 置 ) 相 比 ， 它 采用 了 不 同 的 算法 。 这 种 区 别 是 有 意 而 为 之 的 ， 而 
且 为 了 强调 后 合资 源 可 以 目 由 地 和 采取 任何 所 吉 欢 的 匹配 标准 。 

口 回调 函数 变 体 只 是 简单 地 返回 全 部 以 上 人 开头 的 79 个 本 地 选项 。 复 制 一 份 实验 室 页 面 ， 
改 该 回调 函数 来 测试 任何 你 所 右 欢 的 、 用 来 涌 选 返回 值 的 算法 。 

目 动 完成 部 件 在 工作 的 时 候 触 发 了 各 种 事件 。 下 面 就 来 看 看 有 哪些 事件 。 


11.4.3 ”自动 完成 部 件 的 事件 


在 目 动 完成 部 件 运 行 的 时 候 , 触发 了 很 多 目 定 义 事件 , 这 些 事 件 不 仅 用 来 通知 我 们 发 生 了 什 
么 ， 而 且 可 以 让 我 们 取消 采 些 操作 。 

和 其 他 的 jQuery UI 自 定 义 事 件 一 样 , 向 事件 处 理 需 传人 两 个 参数 : 事件 实例 和 上 自 定义 对 象 。 
除了 autocompletefocus、 autocompletechange 和 autocompleteselect 事件 ， 这 个 目 定 
义 对 象 是 空 的 。 对 于 focus、change 和 select 事件 , 这 个 对 象 包含 一 个 item 属性 ,这 个 属性 
又 包含 label 和 value 属性 , 分 别 表示 聚焦 或 选择 的 值 的 label 和 value 属性 。 所 有 事件 处 理 
冀 的 函数 上 下 文 ( this ) 都 被 设置 为 <input> 元 素 ， 参 见 表 11-8。 

表 11-8 jQuery UI 自动 完成 部 件 的 事件 











SS 


























事 件 选 项 描 述 

autocomletechangdge change 当选 择 一 个 菜单 项 导致 <input> 元 素 的 值 发 生 改 变 时 和 触发。 这 
个 事件 总 会 在 autocompleteclose 事 件 之 后 被 触发 

autocompleteclose close 每 当 自 动 完成 染 单 关 闭 时 触发 

autocompletefocus focus 每 当 一 个 菜单 项 获取 焦点 时 触发 除非 取消 ( 例如 ,返回 false )， 
否则 聚焦 的 值 会 被 设置 到 <input> 元 素 中 

autocompleteopen open 在 已 经 准备 好 数据 并 且 准 备 打开 荣 单 时 触发 

autocompletesearch search 在 delay 和 minLength 条 件 都 已 经 满足 之 后 , 由 source 指 定 的 
机 制 在 激活 之 前 触发 。 如 果 取 消 ， 搜 索 操 作 将 被 终止 

autocompleteselect select 从 自动 完成 菜单 选择 某 项 值 时 触发 .取消 这 个 事件 会 阻止 该 值 被 


设置 到 <input> 元 素 中 (但 是 不 会 阻止 关闭 菜单 ) 


日 动 完成 实验 室 使 用 所 有 的 这 些 事件 来 更 新 控制 台 显 示 ( 每 当 事 件 被 触发 时 )。 
下 面 来 看 看 如 何 为 日 动 完成 部 件 设 置 样式 。 


11.4.4 ”自动 完成 部 件 的 样式 
和 其 他 部 件 一 样 ， 自 动 完 成 部 件 通 过 将 类 名 分 配给 组 成 自动 完成 部 件 的 元 素 , 来 继承 jQuery 














QD 如 果 此 时 输入 字母 o， 则 自动 完成 菜单 中 显示 的 是 honcho 和 comedian， 对 应 的 数据 源 是 {label:"honcho",， 
value:"Pointy-haired Boss"} 和 {label:"comedqian"，value:"charlie Chaplin"} 两 个 对 和 象 ， 可 见 匹 
配 是 在 label 上 进行 的 。 
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UI CSS 主题 的 样式 元 素 。 

当 把 <input> 元 际 转 变 为 目 动 完成 部 件 时 ， 就 会 回 其 添加 ui-autocomplete-input 类 名 。 

日 动 完 成 菜单 会 被 创建 为 市 有 类 名 ui-autocomplete 和 ui-menu 的 无 序列 表 元 素 ( <ul> )。 
菜单 中 的 值 被 创建 为 党 有 类 名 ui-menu-item 的 <1i> 元 素 。 在 这 些 列表 项 中 ， 销 点 元 素 会 在 鼠 
标 悬 停 时 获得 ui-state-hover 类 名。 

我 们 可 以 使 用 这 些 类 名 在 目 动 完成 元 素 上 添加 目 己 的 样式 风格 。 

例如 ,假设 我 们 希望 把 自动 完成 菜单 的 透明 度 稍 微调 低 ， 可 以 使 用 如 下 的 样式 规则 . 

.Uli-autocomplete.ui-menu { opacity: 0.9; } 

在 此 要 小 心 。 如 果 元 素 透 明度 过 低 会 使 其 变 得 不 可 见 "。 

如 果 有 很 多 匹配 项 的 话 , 自动 完成 末 单 会 变 得 非常 大 。 如 果 希 望 用 更 少 的 空间 来 显示 更 多 的 
项 目 ， 那 么 可 以 使 用 如 下 规则 缩小 每 一 项 的 字体 大 小 : 

.UL-autocomplLete.uUL-menu .ui-menu-item { font-size: 0.75em; } 

注意 ，ui-menu-item 不 是 特定 于 自动 完成 部 件 的 类 名 【( 如 果 是 的 话 ， 它 会 包含 文本 
autocomplete )， 因此 我 们 使 用 ui-autocomplete 和 ui-menu 来 限定 此 类 名 ， 以 确保 不 会 在 
无 意 中 将 样式 应 用 到 页 面 上 的 其 他 元 素 上 。 

如 采 硕 望 让 鼠标 悬 停 的 项 目 突出 显示 ， 该 怎么 办 ? 可 以 改变 它们 的 表 框 为 红色 : 

.Uli-autocomplete.ui-menu a.ui-state-hover { border-color: red; } 

自动 完成 部 件 可 以 让 用 户 在 大 型 数据 集中 快速 地 检索 ,从 而 防止 了 信息 的 泛滥 。 下 面 来 看 看 
如 何人 简化 另 一 件 在 数据 输入 方面 一 下 都 很 麻烦 的 事情 : 输入 日 期 。 


11.5 日 期 选择 器 


输入 日 期 信息 是 男 一 个 一 直 令 Web 开发 人 员 感 到 焦虑 的 领域 , 输入 的 友好 度 也 往往 令 用 户 
失望 。 有 很 多 使 用 基本 HTML 4 控件 的 方法 ,但 是 所 有 的 尝试 都 有 自身 的 缺点 。 

很 多 站 点 为 用 户 呈 现 了 一 个 简单 的 文本 输入 框 , 用 户 必须 向 其 输入 日 期 但 是 尽管 包含 了 类 
似 “ 请 输入 ddmmy/yyyy 格式 的 日 期 ”的 说 明 ， 用 户 仍然 还 是 会 弄 错 。 同 样 ， 一 些 Web 开发 人 员 
自己 也 会 弄 错 。 如 果 在 经 过 15 次 失败 的 尝试 后 ， 才 发 现在 输入 单个 数字 的 天 数 或 月 份 时 必须 包 
含 前 面 的 零 ， 你 是 不 是 有 一 种 想 把 自己 的 电脑 从 屋子 中 丢 出 去 的 冲动 ? 

另 一 个 方法 是 使 用 三 个 下 拉 列 表 ,， 分 别 表 示 月 份 、 天 数 和 年 份 。 尽 管 这 种 方法 极 大 地 减少 了 
用 户 出 错 的 可 能 性 , 但 是 却 很 笨拙 日 需 要 多 次 单 击 才 能 选择 一 个 日 期 而且 开发 者 仍然 需要 防止 
出 现 类 似 “2 月 31 日 ”的 选项 。 

当 人 们 想起 日 期 , 就 会 想到 日 历 ,， 因此 让 用 户 输入 日 期 最 目 然 的 方式 应 该 是 让 他 们 在 一 个 日 
历 中 选择 。 






















































































(opacity 的 取 值 在 0~ 1 之 间 ， 取 值 为 1 的 元 素 完 全 不 透明 ， 取 值 为 0 是 完全 透明 ， 不 可 见 的 。 
一 一 编者 注 
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通常 称 为 日 历 控 件 或 日 期 选择 器 的 脚本 已 经 存在 有 一 段 时 间 了 , 但 是 它们 通常 不 好 配置 , 不 
合 在 页 面 上 使 用 ， 而 且 还 需要 和 站 点 的 样式 匹配 。 把 这 个 问题 留 给 jQuery 和 jQuery UI 吧 ， 使 
用 jQuery UI 的 日 期 选择 紫 很 容易 就 能 搞定 它 。 





11.5.1 创建 jQuery 日 期 选择 器 


创建 jQuery 日 期 选择 需 很 简单 ， 尤 其 是 如 果 采 用 默认 值 的 话 。 只 有 在 为 了 更 好 地 配合 应 用 
程序 而 配置 日 期 选择 天 的 众多 选项 时 才 会 有 些 复杂 。 

和 其 他 的 jQuery UI 元 条 一 样 ，datepicker() 公 开 了 基本 的 UI 方 法 集 ， 同 时 也 提供 了 一 些 
特殊 的 方法 用 来 在 创建 之 后 控制 元 素 。 





命令 语法 : datepicker 


datepicker (options) 

datepicker('disable') 

datepicker('enable') 

datepicker('destroy') 

datepicker('option', optionName, value) 

datepicker('dialog', dialogDate, onselect, options, position) 
datepicker('isDisabled') 

datepicker('hide', speed) 

datepicker('show') 

datepicker('getDate') 

datepicker('setDate', date) 

datepicker('widget') 

将 包装 集中 的 <input>、<div> 和 <span> 元 素 转 变 为 日 期 选择 控件 。 对 于 <input> 元 素 , 日 
期 选择 器 会 在 输入 框 获取 焦点 时 显示 ; 对 于 其 他 元 素 ， 会 创建 一 个 内 联 的 日 期 选择 器 


options (对 象 ) 一 个 散 列 对 象 ， 由 要 应 用 到 包装 集中 元 素 的 选项 组 成 〈 参 见 表 
11-9 )， 从 而 使 这 些 元 素 成 为 日 期 选择 器 

'disable' (字符 串 ) 禁用 日 期 选择 控件 

‘enable' (字符 串 ) 重新 启用 被 禁用 的 日 期 选择 控件 

'destroy (字符 串 ) 使 任何 转变 为 日 期 选择 控件 的 元 素 恢 复 到 其 初始 状态 

option (字符 串 ) 基于 剩余 的 参数 ， 设 置 包 装 集中 所 有 元 素 的 选项 值 ， 或 者 获取 


包装 集中 第 一 个 元 素 ( 必须 是 日 期 选择 元 素 ) 的 选项 值 。 如 果 指 定 这 个 字 
符 串 作为 第 一 个 参数 ， 则 至 少 需要 提供 optionName 参数 
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(字符 串 ) 要 设置 或 返回 的 选项 名 称 的 值 (参见 表 11-9 )。 如 果 提 供 value 


optionName 
参数 ， 则 这 个 值 就 成 为 选项 的 值 。 如 果 没 有 提供 value 参数 ， 则 返回 已 命 
名 选项 的 值 

value ( 对象 ) 指定 要 设置 选项 的 值 (通过 optionName 参数 来 标识 ) 

'dialog ( 字符 串 ) 显示 包含 日 期 选择 器 的 jQuery UI 对 话 框 

dialogDate (字符 串 | 日 期 ) 将 对 话 框 中 日 期 选择 器 的 初始 日 期 指定 为 字符 串 表 示 的 当 
前 日 期 格式 (查看 表 11-9 关于 dateFormat 选项 的 描述 ) 或 Date 实例 

onselect (函数 ) 如 果 指 定 ， 则 定义 当选 择 日 期 时 要 调用 的 回调 函数 ( 向 该 函数 传 
入 日 期 文本 和 日 期 选择 器 实例 ) 

DOSition (数组 | 事件 ) 用 来 指定 的 对 话 框 位 置 的 数组 (形式 为 [left，top] ), 或 
者 用 来 确定 对 话 框 位 置 的 鼠标 事件 的 Event 实例 

1sDisableda， ( 字符 事 ) 返回 true 或 false 来 报告 日 期 选择 器 当前 是 否 被 禁用 

'hide' (字符 囊 ) 关闭 日 期 选择 器 

speed ( 字符 串 | 数字 ) slow、normal、fast 或 者 一 个 毫秒 值 ， 用 来 控制 关闭 日 
期 选择 器 的 动画 

' show' (字符 串 ) 打开 日 期 选择 器 

'getDate' ( 字符 事 ) 返回 日 期 选择 器 当前 选中 的 日 期 。 如 果 还 没有 选中 任何 值 ， 则 
这 个 值 可 以 是 null 

SetDate， (字符 串 | 上 日 期 ) 将 指定 的 日 期 设置 为 日 期 选择 器 的 当前 日 期 

date ( 字符 串 | 日 期 ) 为 日 期 选择 器 设置 的 日 期 。 这 个 值 可 以 是 Date 实例 ， 也 
可 以 是 用 于 识别 绝对 或 相对 日 期 的 字符 串 。 绝 对 日 期 使 用 控件 的 日 期 格式 
(由 dateFormat 选项 来 指定 ， 参 见 表 11-9 ) 来 指定 ， 或 者 是 由 相对 当前 
日 期 的 值 组 成 的 字符 串 。 相 对 日 期 由 数字 组 成 , 后 面 紧 跟 着 表示 月 份 的 m、 
表示 天 数 的 d、 表 示 星 期 的 w 以 及 表示 年 份 的 y 
例如 ， 明 天 是 +1d、 一 周 零 4 天 是 +lw +4d。 正 负 值 都 可 以 使 用 

'widget' ( 字符 事 ) 返回 日 期 选择 部 件 元 素 ( 即 市 有 ui-datepicker 类 名 的 元 素 ) 

返回 值 


包装 集 ， 除 了 返回 如 上 述 值 的 情况 





似乎 是 为 了 弥补 目 动 完 成 部 件 选 项 过 少 的 遗憾 ， 日 期 选择 硕 提 供 了 一 组 令 人 眼花 组 乱 的 选 
项 ， 使 其 成 为 jQuery UI 集合 中 可 配置 性 最 高 的 部 件 。 不 用 太 担 心 ， 通 常 只 需 使 用 默认 值 。 不 过 
在 需要 更 好 地 适应 站 点 时 ， 可 以 修改 这 些 选 项 ， 改 变 日 期 选择 大 的 工作 方式 。 
用 不 过 这 些 选 项 产生 了 一 个 相当 复 末 的 日 期 选择 实验 室 页 面 ( 参见 图 11-11 )。 你 可 以 在 文件 
chapterll/datepickers/lab.datepickers.html 找到 这 个 页 面 。 
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B00 


[ jQuery UI Datepickers Lab 


x We 
让] 省 窑 http://localhost/jqia2 /chapterll /datepickers /lab.datepickers.html 


my jQuery UI Datepickerrs Lab 今 “ ) 


Datepicker options 
altField: @ unspecified © #otherField 
altFormat: 


[jQuery in Action, 2nd Editior X/ 








appendText: 


autoSize: Qunspecified Otrue Ofalse 
buttonImage: @ unspecified O calendar.png 
buttonImageOnly: unspecifled Otrue Ofalse 
buttonText: 
changeMonth: unspecified Otrue Ofalse 
changeYear: @ unspecified Otrue O false 
closeText: 
constrainInput: @ unspecified Otrue Ofalse 
currentText: 


dateFormat: 
defaultDate: 


duration: @ unspecified Oslow Onormal Ofast O (msecs) 
firstDay: @unspecfled O00OQ010OQ2030405056 
gotoCurrent: @ unspecifled Otrue Ofalse 
hideIfNoPrevNext: Qunspecified Otrue Ofalse 
maxDate: 
minDate: 


navigationAsDateFormat: unspecified Otrue Ofalse 
numberOfMonths: 
selectOtherMonths: @ unspecified Otrue Ofalse 
showAnim: unspecified © show © fadeln © slideDown 
showButtonPanel: @ unspecified © true O false 
showCurrentAtPos: 
showMonthAfterYear: @@ unspecified Otrue Ofalse 
showOn: @unspecified © focus O button © both 
showOtherMonths: @ unspecified Otrue Ofalse 
showWeek: @ unspecifled Otrue Ofalse 
stepMonths: | 
weekHeader: 


yearRange: 
yearSuffix: 


图 11-11 jQuery UI 日 期 选择 实验 室 帮 助 我 们 理解 日 期 选择 控件 各 种 可 用 的 丰富 选项 

( 这 个 页 面 太 长 了 ， 一 个 屏幕 根本 显示 不 下 ) 
你 可 以 一 边 阅 读 表 11-9 中 所 描述 的 那些 选项 ， 一 边 在 日 期 选择 实验 室 页 面 尝 试 运 用 
选项 。 
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表 11-9 jQuery UI 日 期 选择 器 的 选项 
是 否 在 实验 
室 页 面 中 
lel ( 选择 器 ) 为 字段 指定 的 jQuery 选择 需 , 这 个 字段 的 值 会 在 选择 日 期 时 同时 V 
更 新 。 使 用 altFormat 选 项 来 设置 这 个 值 的 格式 。 这 个 选项 对 于 将 日 期 值 
设置 到 一 个 隐藏 输入 元 素 (将 要 提交 到 服务 需 ) 非常 有 用 ， 同 时间 用 户 显 示 
一 个 更 加 用 户 友好 的 格式 


altFormat (字符 串 ) 当 指 定 a1tField 时 ， 提 供 将 要 被 写 入 男 一 个 元 素 的 日 期 格式 。 Vv 
这 个 格式 和 $s .datepicker.formatDate() 实 用 也 数 使 用 的 格式 相同 
一 详细 信息 请 参见 11.5.2 节 中 的 描述 


apperndText (字符 串 ) 被 放置 到 <input> 元 素 后 面 的 值 ， 用 来 呵 用 户 显示 说 明 。 这 个 v 
值 显示 在 带 有 类 名 ui-datepicker-append 的 <span> 元 素 中 ， 并 有 昌 可 以 
包含 HTML 标 签 


altos1ze (布尔 ) 如 果 为 true， 则 调整 <input> 元 素 的 尺寸 来 适合 dateFormat V 
选项 指定 的 日 期 选择 右 的 日 期 格式 。 如 果 省 略 ， 则 不 会 改变 <input> 元 素 的 
尺寸 


beforeShow ( 也 数 ) 在 日 期 选择 右 显 示 之 前 被 调用 的 回调 洱 数 ， 并 将 <ijnput> 元 素 和 Vv 
日 期 选择 各 实例 作为 参数 传 入 回调 函数 。 这 个 函数 可 以 返回 一 个 改变 日 期 选 
择 需 的 选项 散 列 值 。 


beforeShowDay ( 浮 数 ) 在 日 期 选择 大 显 示 日 期 之 前 被 调用 的 回调 函数 ， 并 将 日 期 作为 唯 
一 的 参数 传人 回调 函数 。 这 可 以 用 来 履 产 显示 某 些 日 期 元 素 的 默认 行为 。 这 
个 国 数 必须 返回 一 个 包含 三 个 元 素 的 数组 ， 如 下 所 示 : 
D [0] true 使 得 该 日 期 可 选 ，false 使 其 不 可 选 
口 [1] 一 一 应 用 到 日 期 元 素 的 以 空格 分 隔 的 CSS 类 名 字符 串 ， 或 者 不 应 用 
CSS 规 则 的 空白 字符 串 
口 [2] 一 一 可 选 的 字符 串 为 日 期 元 素 添 加 提示 文本 


buttonImage (字符 串 ) 指定 显示 在 按钮 上 的 图 片 路 径 ， 将 showon 选 项 设置 为 putton V 
或 both 都 可 以 局 用 这 个 功能 。 如 果 同 时 提供 了 puttonText， 则 按钮 文本 
将 成 为 按钮 的 alt 特 性 

buttonrmageOnly (布尔 ) 如 果 为 true， 则 只 显示 由 buttonImage 指 定 的 图 片 (不 是 在 按 Vv 
钮 上 显示 图 片 ),。 要 显示 图 片 ，showOn 选 项 必须 是 putton 或 both 两 者 之 一 


bit GonTent (字符 串 ) 指定 显示 在 按钮 上 文本 内 容 ， 将 showon 选 项 设置 为 putton 或 V 
both 能 够 启用 这 个 功能 。 如 果 同 时 提供 了 buttonImage， 则 此 文本 将 变 成 
图 片 的 alt 特 性 


calculateWeek ( 汝 数 ) 目 定 义 函 数 ， 用 来 计算 并 返回 作为 单个 参数 传 入 的 日 期 所 在 的 周 
数 。 上 默认 是 由 $ .datepicker .iso8601Week () 实 用 孔 数 提供 的 实现 


changeMonth (布尔 ) 如 果 为 true， 则 显示 月 份 的 下 拉 列 表 ， 人 允许 用 户 直 接 改 变 月 份 ， V 
而 无 需 使 用 箭头 按钮 来 逐个 遍历 月 份 。 如 果 省 略 ， 则 不 显示 月 份 下 拉 列 表 


changeYear (布尔 ) 如 果 为 true， 则 显示 年 份 的 下 拉 列 表 ， 人 允许 用 户 直 接 改 变 年 份 而 V 
无 需 使 用 箭头 按钮 来 逐个 遍历 年 份 。 如 果 省 略 ， 则 不 显示 年 份 下 拉 列 表 


closeText (字符 串 ) 如 果 通 过 showButtonPanel 选 项 来 显示 按钮 面板 ， 则 用 指定 v 
文本 ， 蔡 换 关闭 按钮 默认 标题 Done 


constrainInput (布尔 ) 如 果 为 true( 默认 值 )， 则 限制 输入 到 <input> 元 素 的 文本 为 控 v 
件 所 允许 日 期 格式 的 字符 ( 参考 dateFormat 选 项 ) 


选 项 摘 述 
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选 项 


Current'Text 


dateFormat 


dayNames 


dayNamesMin 


dayNamesShort 


defaultDate 


disabled 


duration 


firstDay 


gotoCurrent 


hideIfNopPprevNext 


1SsRTL 


maxDate 


minDate 


monthNames 


monthNamesShort 


第 11 章 jQuery UI 部件 : 超越 HTML 控件 


摘 ” 述 


(字符 串 ) 如 果 通 过 showButtonPanel 选 项 来 显示 按钮 面板 ， 则 用 指定 
文本 替换 当前 按钮 默认 文本 Today 


(字符 串 ) 指定 所 使 用 的 日 期 格式 。 详 细 信 息 请 参见 11.5.2 节 


(数组 ) 7 个 元 素 所 组 成 的 数组 ， 提 供 一 周 内 每 天 的 名 称 ， 其 中 第 一 个 元 
素 表 示 星 期 天 。 可 以 用 来 本 地 化 控件 。 软 认 集 合 是 由 英文 表示 的 完整 的 每 
天 名 称 组 成 的 数组 


(数组 ) 7 个 元 素 所 组 成 的 数组 ， 提 供 一 周 内 每 天 名 称 的 缩写 ， 其 中 第 一 
个 元 系 表 示 星 期 天 ， 用 作 列 的 标题 。 可 以 用 来 本 地 化 控件 。 默 认 集合 是 由 
英文 表示 的 每 天 名 称 前 面 两 个 字母 组 成 的 数组 


(数组 ) 7 个 元 素 所 组 成 的 数组 ， 提 供 短 格式 一 周 内 每 天 的 名 称 ， 其 中 第 
一 个 元 又 表示 星期 天 。 可 以 用 来 本 地 化 控件 。 默 认 集合 是 由 英文 表示 的 每 
天 名 称 前 面 三 个 字母 组 成 的 数组 


(日 期 数字 | 字符 串 ) 如 果 <input> 元 素 没有 值 的 话 ， 设 置 控件 的 初始 日 
期 用 来 覆盖 默认 值 ( 当前 日 期 ) 。 它 可 以 是 aate 实 例 , 距离 今天 的 天 数 ， 
或 者 指定 绝对 或 相对 日 期 的 字符 串 。 详 细 信 息 请 参 几 datepicker () 方 法 
语法 中 date 参 数 的 描述 


(布尔 ) 如 果 指 定 并 设置 为 crue， 则 部 件 初始 是 被 禁用 的 


(字符 串 | 数字 ) 指定 显示 日 期 选择 器 的 动画 速度 。 可 以 是 表示 动画 持续 时 
间 长 短 的 slow、normal ( 默认 值 ) 、fast 或 毫秒 数 


(数值 ) 设置 一 周 中 的 第 一 天 ， 并 且 会 在 最 左 侧 的 一 列 显示 。 星 期 天 ( 默 
认 值 ) 是 0， 星 期 六 是 6 

(布尔 ) 如 果 为 tzue， 则 当天 的 链接 被 设置 为 选中 的 日 期 ， 覆 盖 其 默认 
值 (当前 日 期 )? 


(布尔 ) 如 果 为 true， 则 在 前 一 个 月 和 后 一 个 月 的 链接 不 适用 时 隐藏 它 
们 ( 而 不 是 仅仅 禁用 这 些 链接 ) , 由 minDate 和 maxDate 选 项 的 设置 决定 。 
默认 为 false 


(布尔 ) 如 果 为 true， 则 本 地 化 指定 一 个 从 右 癌 左 的 语言 。 由 这 个 控件 
的 本 地 化 版 本 所 用 。 玩 认为 false 


(日 期 数字 | 字符 串 ) 为 控件 设置 最 大 可 选择 的 日 期 。 它 可 以 是 Date 实 例 ， 
距离 今天 的 天 数 ， 或 者 指定 绝对 或 相对 日 期 的 字符 串 。 详 细 信 息 请 参阅 日 
期 选择 需 setDate 方 法 语法 中 qate 人 参数 的 描述 


(日 期 数字 | 字符 串 ) 为 控件 设置 最 小 可 选择 的 日 期 。 它 可 以 是 Date 实 例 ， 
距离 今天 的 天 数 ， 或 者 指定 绝对 或 相对 日 期 的 字符 串 。 详 细 信 息 请 参阅 
datepicker () 方 法 语法 中 date 参 数 的 描述 


(数组 ) 12 个 元 系 所 组 成 的 数组 ， 提 供 完整 月 份 名 称 ， 其 中 第 一 个 元 系 表 
示 一 月 。 可 以 用 来 本 地 化 控件 。 软 认 集 合 是 由 英文 表示 的 完整 月 份 名 称 组 
成 的 数组 

(数组 ) 12 个 元 素 所 组 成 的 数组 ， 提 供 短 格式 月 份 名 称 的 ， 其 中 第 一 个 元 
素 表示 一 月 。 可 以 用 来 本 地 化 控件 。 软 认 集 合 是 由 英文 表示 的 完整 月 份 名 
称 前 三 个 字母 组 成 的 数组 

























































































Q 必须 同时 将 showButtonPanel 设置 为 true,， 才能 显示 当天 的 链接 。 


( 续 ) 


是 否 在 实验 
室 页 面 中 
W 
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摘 述 


(布尔 ) 如 果 为 true, 则 导航 链接 nextText、preText 和 currentText 
会 在 显示 之 前 传 信 $ .datepicker.formatDate() 也 数 进行 格式 化 。 这 将 
可 以 为 这 些 选 项 提供 日 期 格式 字符 串 ， 并 将 其 转变 为 相应 的 日 期 值 "。 默 认 
为 false 


(字符 串 ) 指定 文本 来 奉 换 下 个 月 导航 链接 的 默认 文本 Next。 注 意 ， 
ThemeRoller 会 将 这 个 文本 替换 为 一 个 图 标 


(数值 | 数组 ) 在 日 期 选择 占 中 显示 的 月 份 个 数 ， 或 者 指定 月 份 网 格 中 行 数 
和 列 数 的 二 维 数组 。 例 如 ，[3,2] 将 会 在 3 行 2 列 的 网 格 中 显示 6 个 月 。 上 默认 
情况 下 ， 只 显示 一 个 月 


(函数 ) 当日 期 选择 器 转 到 一 个 新 的 月 份 或 年 份 时 调用 的 回调 函数 ， 向 此 
回调 函数 传递 的 参数 可 以 是 选择 的 年 份 、 月 份 (从 1 开始 算 起 ) ， 或 日 期 选 
择 需 实例 。 国 数 上 下 文 被 设置 为 输入 字段 元 素 

(函数 ) 每 当日 期 选择 器 关闭 时 调用 的 回调 孔 数 ， 向 此 回调 函数 传递 的 参 
数 可 以 是 选择 的 日 期 ( 以 文本 表示 ， 如 果 没 有 选择 ， 则 为 空 字符 串 ) ,或 日 
期 选择 器 实例 。 函 数 上 下 文 被 设置 为 输入 字段 元 素 

(函数 ) 每 当选 择 一 个 日 期 时 调用 的 回调 函数 ， 向 此 回调 传递 的 参数 可 以 
是 选择 的 日 期 ( 以 文本 表示 ， 如 果 没 有 选择 ， 则 为 空 字符 串 ) ， 以 及 日 期 选 
择 需 实例 。 国 数 上 下 文 被 设置 为 输入 字段 元 素 

(字符 串 ) 指定 文本 来 奉 换 上 个 月 导航 链接 默认 文本 Prev (注意 ， 
ThemeRoller 会 将 这 个 文本 蔡 换 为 一 个 图 标 ) 

(布尔 ) 如 果 为 true， 则 显示 在 当前 月 之 前 和 之 后 的 日 期 是 可 选 的 。 只 有 
将 showOtherMonths 选 项 设置 为 Lrue， 才 显示 这 些 日 期 。 默 认 情 况 下 ， 
这 些 日 期 是 不 可 以 选择 的 


(数值 | 字符 串 ) 如 有 果 是 一 个 数学 ， 则 指定 0 ~ 99 之 间 的 一 个 年 份 , 大 于 这 个 
值 的 两 位 数字 的 年 份 值 都 被 认为 是 上 一 个 世纪 ”。 例 如 ， 如 果 指 定 为 50， 则 
年 份 39 被 认为 是 2039， 而 年 份 32 被 解释 为 1952。 

如 采 是 一 个 字符 串 ， 则 此 字符 串 值 被 转化 为 整数 值 后 再 与 当前 年 份 相 加 

默认 值 是 +10， 表 示 在 当前 年 份 的 基础 上 再 增加 10 年 作为 此 选项 的 值 

(字符 串 ) 设 置 显示 、 隐 藏 日 期 选择 需 的 动画 名 称 。 如 果 指 定 , 必须 是 show 
(默认 值 ) 、fadeIn、slideDown 或 任何 jQuery UI 显 示 / 隐 藏 动画 名 称 中 的 


一 个 





















































Q(D 作为 示例 ， 请 在 实验 室 页 面 运行 这 段 代码 : 


Ss('.testSubject') .datepicker ({navigationAsDateFormat:true,showButtonpPpanel:true, 


currentText:"yy-mm-dd"}); 








你 会 看 到 原本 显示 “Today” 的 按钮 现在 显示 的 是 当前 的 日 期 ， 比 如 “2011-11-18”。 
@) 任何 小 于 或 等 于 shortYearCutoff 选项 值 的 2 位 数字 的 年 份 都 被 认为 是 本 世纪 , 而 大 于 此 选项 值 的 2 位 数字 的 
年 份 被 认为 是 上 个 世纪 。 作 为 演示 ， 请 在 实验 室 页 面 执行 如 下 代码 (你 可 能 需要 借助 Firefox 中 的 Firebug 来 完成 


这 个 操作 ): 











Ss(".testSubject") .datepicker ({shortYearCutoff:11,dateFormat:"dd-mm-yy", 
defaultDate:"01-09-12"}); 


然后 单 击 文本 框 打 开 日 期 选择 大， 
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(组 ) 
是 否 在 实验 
室 页 面 中 
v 


你 会 发 现 日 期 选择 器 的 标题 显示 为 September 1912 ( 而 不 是 September 2012 )。 
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weekHeader 
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jQuery UI 部 件 : 超越 HTML 控件 


摘 述 


(布尔 ) 如 果 为 true， 则 显示 日 期 选择 需 底 部 的 按钮 面板 , 包含 当前 按钮 和 
关闭 按钮 。 这 些 按钮 的 标题 由 currentText 和 closeText 选 项 设置 。 罗 认为 
false 

(数值 ) 在 多 月 份 显示 中 ， 指 定 当前 月 份 的 显示 位 置 ， 从 左上 角 开 始 的 从 
零 算 起 的 索引 位 置 ?。 默 认为 0 

(布尔 ) 如 果 为 true， 则 日 期 选择 需 头 部 的 月 份 和 年 份 的 位 置 互 换 。 默 认 
false 

(字符 囊 ) 指定 什么 事件 触发 日 期 和 择 吕 的 显示 ,可 以 是 Focus、button 
或 both 其 中 之 一 

focus (默认 值 ) ， 在 <input> 元 素 获 得 焦点 时 显示 日 期 选择 需 ， 而 
button 会 在 <input> 元 素 后 创建 一 个 按钮 元 素 (在 任何 追加 的 文本 之 前 ) ， 
单 击 这 个 按钮 元 素 会 显示 日 期 选择 需 。 按 钮 的 外 观 可 以 使 用 puttonTexct、 
buttonImage 和 buttonImageon1ly 选 项 改变 

both 不 仅 会 创建 触发 器 按钮 ， 而 且 聚 焦 事 件 也 会 显示 日 期 选择 需 

(对 象 ) 如 果 使 用 showaAnim 选 项 指定 了 一 个 jQuery UI 动 画 ， 可 通过 此 参 
数 提供 传 入 到 这 个 动画 的 选项 散 列 值 

(布尔 ) 如 果 为 true， 则 显示 本 月 第 一 天 和 最 后 一 天 之 前 或 之 后 的 日 期 。 这 
个 日 期 是 不 可 选择 的 ,除非 将 selectotherMonths 选 项 设置 为 true。 默 认为 
false 


(布尔 ) 如 果 为 true， 则 在 月 份 的 左 侧 显示 一 个 包含 星期 数 的 列 。 
calculateWeek 选 项 可 以 用 来 修改 生成 这 个 值 的 方式 。 上 默认 为 false 

(数值 ) 指定 单 击 一 个 月 份 导航 链接 时 ， 一 次 移动 几 个 月 。 默 认 情 况 下 ， 
每 次 只 移动 一 个 月 

(字符 串 ) 当 showWeek 为 true 时 ， 指 定 星期 数列 显示 的 文本 ， 禾 新 默认 
值 Wk 

( 字符 串 ) 当 changeYear 为 true 时 ,指定 显示 在 下 拉 列 表 中 年 份 的 数量 
(形式 为 from:to ) 。 值 可 以 是 绝对 或 者 相对 的 (例如 ，2005 :+2 指 2005 年 
到 当前 年 份 之 后 的 2 年 ) 。 可 以 使 用 前 级 c 来 指 相 对 于 选中 年 份 的 值 ， 而 不 是 
相对 于 当前 年 份 的 值 (例如 ，c-2:c+3 ) 

(字符 串 ) 指定 显示 在 日 期 选择 需 头 部 年 份 后 面 的 文本 
































还 没有 对 此 感到 厌烦 吧 ? 





( 续 ) 
是 否 在 实验 
室 页 面 中 
v 


尽管 将 这 些 选 项 作为 一 个 整体 来 对 待 相当 痛苦 , 但 是 大 部 分 的 日 期 选择 器 选项 只 会 在 需要 覆 
盖 默 认 值 的 情况 下 才 会 用 到 。 在 创建 日 期 选择 器 的 时 候 不 指定 任何 选项 的 情况 也 是 常见 的 。 
11.5.2 日 期 选择 器 的 日 期 格式 


表 11-9 中 的 很 多 日 期 选择 表 选 项 使 用 字符 串 来 表示 日 期 格式 。 它 们 是 用 来 格式 化 和 解析 日 
期 的 字符 串 。 了 字符 串 中 的 字符 模式 代表 了 日 期 的 各 个 部 分 ( 例如 ，y 代表 年 份 ，MM 代表 完整 的 




















中 在 实验 室 页 面 中 ， 通过 如 下 步骤 来 观察 这 个 选项 的 行为 : 设置 numberofMonths 的 值 为 4， 同时 设置 
showCurrentAtPos 的 值 为 2， 单 击 Apply。 然 后 单 击 文本 框 弹出 日 期 选择 部， 观察 包含 当前 日 期 的 月 份 位 于 
从 左 侧 开始 的 月 份 列表 的 第 3 个 位 置 。 


图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 


11.5 日 期 选择 器 351 





月 份 名 称 )， 或 者 是 简单 的 模板 文本 (字面 值 )。 
表 11-10 显示 了 用 在 日 期 格式 模式 中 的 字符 模式 以 及 它们 所 代表 的 含义 。 


表 11-10 日 期 格式 的 字符 模式 























模式 描述 
月 份 中 的 第 几 天 ， 去 除 前 面 的 堆 
2 个 数字 表示 的 月 份 中 的 第 几 天 ， 值 小 于 10 时 包含 前 面 的 夫 
~ 一 年 中 的 第 几 天 ， 去 除 前 面 的 零 
和 3 个 数字 表示 的 一 年 中 的 第 几 天 ， 值 小 于 100 时 包含 前 面 的 零 
短 格式 的 日 期 名 称 
完整 的 日 期 名 称 
. 年 中 的 月 份 ， 去 除 前 面 的 零 ， 其 中 一 月 份 是 1 
和 2 个 数字 表示 的 一 年 中 的 月 份 ， 值 小 于 10 时 包含 前 面 的 堆 
短 格式 的 月 份 名 称 
完整 的 月 份 名 称 。 
2 个 数字 表示 的 年 份 ， 值 小 于 10 时 包含 前 面 的 零 
YY 4 个 数字 表示 的 年 份 
E 自从 1970-1-1 以 来 的 毫秒 数 

自从 0001-1-1 以 来 多 少 个 100 毫 微 秒 

单 引号 

ne 文本 ( 单 引 号 引用 的 字面 值 ) 
其 他 的 任何 字符 文本 


日 期 选择 柯 将 一 些 大 家 部 训 和 若 的 日 期 格式 标 式 定义 为 肖 量 ， 如 表 11-11 所 示 。 
我 们 会 在 11.5.4 广 中 讨论 日 期 选择 带 实 用 哺 数 时 重新 探讨 这 些 模式 。 
下 面 来 关注 一 下 日 期 选择 带 触 发 的 事件 。 


表 11-11 日 期 格式 模式 的 常量 





常 量 模 式 
$s.datepicker.ATOM yy-mm-dd 
Ss.datepicker.COOKIE D,dd M YY 
Ss.datepicker.ISO 8601 yy-mm-dd 
$s.datepicker.RFC 822 D, dMyY 
Ss.datepicker.RFC 850 DD, dd-M-Y 
Ss.datepicker.RFC 1036 DA MY 
Ss.datepicker.RFC 1123 D, dM YY 
Ss.datepicker.RFC 2822 D, dM YY 
$s.datepicker.RSss D, dMY 
$s.datepicker.TICKS ! 
Ss.datepicker.TIMESTAMP @ 
$s.datepicker.W3C yy-mm-dd 
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11.5.3 “日 期 选择 器 的 事件 


太 令 人 司 讶 了 ， 日 期 选择 硕 没 有 事件 ! 

jQuery UI1.8 中 的 日 期 选择 带 代码 是 代码 库 中 最 十 老 的 一 部 分 代码 了 ， 它 还 没有 更 新 过 ， 并 
不 守 其 他 部 件 所 遵守 的 现代 事件 触发 的 约定 。 预 计 这 会 在 jQuery UI 的 未 来 版 本 中 改变 ， 根 据 
jQuery UI 路 线 图 状态 ( 可 以 在 http://wiki.jqueryui.com/ 中 找到 此 路 线 图 )， 这 个 部 件 会 在 2.0 版 本 
中 彻底 重 与 。 

目前 来 说 ， 在 日 期 选择 融 发 生 感 兴趣 的 事情 时 指定 回调 果 数 的 选项 有 beforeShow、 
beforeShowDay、onChangeMonthYear、onClose 和 onselect。 上 所 有 的 这 些 回 调 晒 数 都 是 通 
过 这 些 选 项 来 调用 的 〈 调 用 时 将 <input> 元 素 作 为 图 数 上 下 文 )。 

尽管 日 期 选择 天 缺少 其 他 部 件 都 文 持 的 事件 触发 , 但 是 它 却 给 了 我 们 额外 的 好 处 : 一 组 有 用 
的 实用 函数 。 下 面 来 看 看 这 些 实用 函数 能 做 什么 。 


11.5.4 “日 期 选择 器 的 实用 函数 


日 期 是 难以 处 理 的 数据 类 型 。 试 想 想 一 下 处 理 同 年 与 非 国 年 的 区 别 , 不 同 天 数 的 月 份 , 不 能 
被 平均 分 配 到 每 个 月 份 的 星期 ， 以 及 所 有 其 他 折 麻 日 期 信息 的 吾 怪 用 法 。 和 幸运 的 是 ，JavaScript 
的 Date 实现 为 我 们 处 理 了 大 部 分 细节 问题 。 但 是 还 有 少数 不 尽 如 和 人意 的 地 方 一 一 格式 化 和 解析 
日 期 值 就 是 其 中 的 两 个 。 

jQuery UI 日 期 选择 甫 的 出 现 填补 了 这 些 空 月 。 从 实用 冰 数 上 来 看 , jQuery UI 不 仅 提 供 了 格式 
化 和 解析 日 期 值 的 方法 ， 而 且 使 拥有 多 个 日 期 选择 天 的 页 面 更 容易 处 理 大 量 的 日 期 选择 带 选 项 。 

下 面 就 从 如 何 处 理 大 量 选 项 人手。 

1. 设置 日 期 选择 器 的 黑 认 值 

当 需 要 使 用 多 个 选项 来 获取 想 要 的 外 观 和 行为 时 , 为 页 面 上 的 每 个 日 期 选择 硕 剪 切 和 粘贴 相 
同 的 选项 集合 似乎 是 完全 错误 的 。 我 们 可 以 将 options 对 象 存储 在 一 个 全 局 变量 中 ， 并 且 在 创 
建 每 个 日 期 选择 器 时 引用 这 个 变量 ,不 过 jQuery UI 为 此 提供 了 一 个 更 好 的 解决 方法 : 注册 一 组 
上 默认 选项 来 取代 已 经 定义 的 默认 值 。 这 个 实用 函数 的 语法 如 下 所 示 。 






































命令 语法 : $$ .datepicker.setDefaults 


$.datepicker.setDefaults (options) 


为 所 有 随后 创建 的 日 期 选择 器 设置 选项 的 默认 值 


参数 

options ( 对象) 选项 的 散 列 对 象 ， 作 为 所 有 日 期 选择 器 的 默认 值 
返回 值 

无 
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回想 一 下 日 期 选择 需 选 项 列表 ,其 中 的 一 些 选项 用 来 指定 如 何 显示 日 期 值 的 格式 。 日 期 选择 
器 通常 都 会 设置 这 些 选 项 ， 而 jQuery UI 让 我 们 可 以 在 一 个 地 方 集中 设置 这 些 选 项 。 

2. 格式 化 日 期 值 

可 以 使 用 $.qatepicker.formatDate() 实 用 困 数 来 格式 化 任何 日 期 值 ， 该 吨 数 的 定义 如 下 
所 示 。 


命令 语法 : $. datepicker.formatDate 


$.datepicker.formatDate(format, date, options) 


将 传 入 的 日 期 值 格式 化 为 由 format 模式 和 options 指定 的 字符 串 


参数 
format (字符 囊 ) 日 期 格式 的 模式 字符 串 ， 参 见 表 11-10 和 表 11-11 
date (日 期 ) 需要 格式 化 的 日 期 什 


options ( 对象 ) 选项 的 散 列 对 象 ， 用 来 为 日 期 和 月 份 的 名 称 提 供 可 选 的 本 地 化 值 。 可 使 
用 的 选项 有 dayNames、 dayNamesShort、 monthNames 和 monthNamesShort。 


有 关 这 些 选 项 的 详细 信息 请 参见 表 11-9。 如 果 省 略 ， 则 使 用 默认 的 英文 名 称 
返回 值 
格式 化 的 日 期 字符 囊 





这 就 淘汰 了 我 们 在 第 7 草创 建 的 日 期 格式 化 带 。 不 过 没关系 , 我 们 从 那个 练习 中 学 到 了 很 多 
内 容 ， 而 且 还 可 以 在 不 使 用 jQuery UI 的 项 目 中 使 用 该 日 期 格式 化 器 。 

日 期 选择 天 还 提供 了 其 他 哪些 技巧 呢 ? 

3. 解析 日 期 字符 串 

将 文本 字符 串 转 变 为 日 期 值 和 将 日 期 值 格 式 化 为 文本 字符 串 一 样 有 用 ( 甚至 更 有 用 ), jQuery 
UI 为 此 提供 了 $ .qatepicker.parseDate() 限 数 ， 它 的 语法 如 下 所 示 。 

日 期 选择 右 还 提供 了 男 外 一 个 实用 函数 。 

4. 获取 一 年 中 的 第 几 星 期 

jQuery UI 使 用 由 ISO 8601 标准 定义 的 算法 来 作为 calculateWeek 选项 的 默认 算法 。 如 采 
需要 在 日 期 选择 硕 控 件 之 外 的 场合 使 用 这 个 算法 ， 则 可 以 使 用 jQuery UI 回 我 们 公开 的 
s .datepicker.iso8601Week() 国 数 。 
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命令 语法 : $.datepicker.parseDate 


$.datepicker.parseDate(format, value, options) 


使 用 传 入 的 format 模式 和 options 将 文本 值 转变 为 日 期 值 


参数 
format (字符 串 ) 日 期 格式 的 模式 字符 串 ， 参见 表 11-10 和 表 11-11 
value (字符 串 ) 需要 解析 的 文本 值 


optlions (对 象 ) 选项 的 散 列 对 象 ， 用 来 为 日 期 和 月 份 的 名 称 提供 可 选 的 本 地 化 值 ， 同 
时 也 指定 如 何 去 处 理 2 个 数字 的 年 份 值 。 可 能 的 选项 有 shortYearCutoff、 
dayNames、dayNamesShort、monthNames 和 monthNamesShort。 
有 关 这 些 选 项 的 详细 信息 请 参见 表 11-9。 如 果 省 略 ， 则 使 用 默认 的 英文 名 称 ， 
并 且 将 shortYearCutoff 的 默认 值 +10 

返回 值 

解析 后 的 日 期 值 


命令 语法 : $. datepicker.iso8601lWeek 


$.datepicker.iso8601lWeek (date) 
给 定 一 个 日 期 值 ， 计 算 由 ISO 8601 定义 的 星期 数 ( 即 一 年 中 的 第 几 个 星期 ) 


参数 

date (日 期 ) 将 要 用 来 计算 星期 数 的 日 期 值 
返回 值 

计算 的 星期 数 








ISO 8601 对 星期 数 的 定义 是 从 星期 一 开始 的 星期 , 一 年 中 的 第 一 个 星期 是 包含 一 月 四 日 的 那 
个 星期 〈 换 句 话 说， 也 就 是 包含 第 一 个 星期 四 的 那个 星期 )。 

我 们 已 经 看 到 ，jQuery UI 部 件 可 以 使 用 直观 的 方式 从 用 户 那 里 收集 数据 。 下 面 将 注意 力 转 
移 到 帮助 我 们 组 织 内 容 的 部 件 。 如 果 此 时 你 感到 有 点 疲倦 的 话 , 那么 现在 正 是 时 候 坐 下 来 休息 一 
会 儿 ， 吃 些 点 心 ， 喝 一 杯 包含 咖啡 因 的 饮料 。 

当 你 准备 好 之 后 ， 先 来 看 看 Web 上 最 常用 来 组 织 内 容 的 方式 一 一 选项 卡 。 








11.6 ”选项 卡 


选项 卡 可 能 根本 无 需 介绍 。 作 为 一 种 导航 方式 ， 它 们 在 Web 上 已 经 无 处 不 在 ， 其 使 用 频率 
仅 次 于 超 链接 元 素 。 模 仿 实际 存在 的 卡片 索引 选项 卡 ，GUI 选 项 卡 将 内 容 按 逻 辑 分 组 ， 人 允许 我 们 
在 相同 级 别 的 逻辑 分 组 之 间 快 速 地 切换 。 
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在 以 前 艰 否 的 日 子 里 , 在 选项 卡 面板 之 间 切 换 需 要 刷新 整个 页 面 , 但 是 今天 我 们 可 以 仅仅 使 
用 CSS 根据 不 同 的 情况 来 显示 和 隐藏 元 素 ， 甚 至 根据 需要 使 用 Ajax 来 获取 隐藏 的 内 容 。 

事实 证 明 , 为 了 得 到 正确 的 结果 ,“ 只 使 用 CSS” 需 要 相当 多 的 工作 量 ， 因 此 jQuery UI 给 予 
了 我 们 一 个 现成 的 选项 卡 实 现 ， 当 然 是 和 下 载 的 UI 主题 相 匹 配 的 。 


11.6.1 创建 选项 卡 的 内 容 


目前 学 到 的 大 部 分 部 件 都 是 将 一 个 简单 的 元 素 (例如 <button>、<div>、<input> ) 转变 为 
目标 部 件 。 选 项 卡 ( 就 其 本 质 而 言 ) 使 用 的 是 一 个 更 加 复杂 的 HTML 结构 。 

















<div id="tabset"> 
<ul> 9 包含 选项 卡 和 选项 卡 面 板 
<l1i><a href="#panell">Tab One</a></1i> 
<l1i><a href="#panel2">Tab Two</a></1i> © 定义 选项 卡 
<l1i><a href="#panel3">Tab Three</a></1i> 
</ul> 
<div id="panell"> 
. Content ... 
</div> 
<div id="panel2"> 提供 面板 
. Content ... 
</div> 
<div id="panel3"> 
. Content ... 
</div> 
</div> 





这 个 结构 由 包含 整个 选项 卡 集 的 <div> 元 素 @ 组 成 ， 这 个 元 素 叉 包 含 两 部 分 : 一 个 包含 选项 
卡 列表 项 ( <1i> ) 的 无 序列 表 ( <ul> ) 个， 以 及 一 组 <aiv> 元 素 ( 和 选项 卡 的 面板 合 )。 

用 来 呈现 选项 卡 的 每 个 列表 项 都 包含 一 个 锚 点 元 素 ( <a> ), 这 个 元 系 不 仅 用 来 定义 选项 卡 与 
其 相应 面板 之 间 的 关系 ， 而 且 还 是 一 个 可 获得 焦点 的 元 素 。 这 些 锚 点 元 素 的 href 特性 指定 了 一 
个 HTML 铺 点 散 列 值 ， 可 以 作为 jQuery 的 ia 选择 器 ， 用 来 选择 这 个 选项 卡 所 关联 的 面板 。 

每 个 选项 卡 在 第 一 次 被 选择 时 ， 它 的 内 容 也 可 以 使 用 Ajax 请 求 来 从 服务 器 获取 。 在 这 种 情 
况 下 ， 锚 点 元 素 的 href 指定 了 当前 活动 内 容 的 URL， 并 且 无 需 在 选项 卡 集中 包含 面板 。 

如 果 要 创建 三 个 选项 卡 的 选项 卡 集 ， 其 中 所 有 内 容 都 从 服务 需 获 取 ， 那 么 HTML 标记 如 下 
所 示 : 


<div id="tabset"> 
<ul> 
<l1i><a href="/url/for/panell">Tab One</a></1i1i> 
<l1i><a href="/url/for/panel2">Tab Two</a></1i> 
<l1i><a href="/url/for/panel3">Tab Three</a></1i> 
</ul> 
</div> 
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在 这 种 情况 下 ,会 目 动 创建 三 个 用 来 保存 动态 内 容 的 <aiv> 元 素 。 你 可 以 在 销 点 上 放置 title 
特性 来 控制 分 配给 这 些 面 板 元 素 的 id 值 。title 值 中 间 的 空格 被 蔡 换 为 下 划 线 后 ， 会 作为 相应 
面板 的 ia 值 。 

你 可 以 使 用 这 个 ia 值 预先 创建 面板 元 素 ， 选 项 卡 会 正确 地 标识 这 个 面板 ， 但 是 如 果 你 不 这 

么 做 ， 选 项 卡 会 目 动 后 成 这 个 面板 。 人 例如， 如果 按 如 下 方式 重新 编写 第 三 个 选项 卡 ， 

<1li><a href="/url/for/panel3" title="a third panel">Tab Three</a></1i> 

面板 的 id 值 将 会 是 a_third_panel。 如 果 这 个 面板 已 经 存在 ,就 会 使 用 现 有 的 面板 ; 否则 
会 创建 一 个 新 面板 。 

可 以 在 一 个 选项 卡 集中 自由 混合 Ajax 或 非 Ajax 选项 卡 。 

一 旦 准备 好 所 有 的 基础 标签 ， 就 可 以 使 用 tapbs () 方 法 来 创建 选项 卡 集 了 (应 用 到 选项 卡 集 
外 部 的 <div> 元 系 上 )， 它 的 语法 如 下 所 示 。 














命令 二 ,去 ， 七 abs 


七 abs (options) 

tabs('disable', index) 

tabs('enable', index) 

tabs('destroy') 

tabs('option', optionName, value) 
tabs('add', association, label, index) 
tabs('remove', index) 

tabs('select', index) 

tabs('load', index) 

tabs('url', index, url) 

tabs('length') 

tabs (' abort ' ) 

tabs('rotate', duration, cyclical) 

上 abs ('widget') 

将 选项 卡 集 标签 ( 本 市 前 面 所 述 的 ) 转变 为 一 组 UI 选 项 卡 控件 


参数 

options (对 象 ) 要 应 用 到 选项 卡 集 的 散 列 对 象 的 选项 ， 如 表 11-12 所 述 

qisable， (字符 串 ) 禁用 一 个 或 者 全 部 选项 卡 。 如 果 提 供 一 个 从 零 开 始 的 下 标 ， 则 
只 禁用 被 标识 的 选项 卡 。 否 则 ， 禁 用 整个 选项 卡 集 

'enable' (字符 囊 ) ne 项 卡 或 者 选项 卡 集 。 如 果 提 供 从 零 开 始 的 


下 标 ， 则 启用 被 标识 的 选项 卡 。 否 则 启用 整个 选项 卡 集 
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'QeSstroy， 


OPtL1Lonm 


optionName 


index 


aaQd' 


association 


label 
工 GmOVe 
' Select 
'l1o0ad' 


'Url' 
url 
Length 


'abort' 


‘rotate'’ 


duration 


Cycle 


'widget' 


返回 值 


2 
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(字符 串 ) 使 任何 转变 为 选项 卡 控 件 的 元 素 恢复 到 其 初始 状态 
( 字符 囊 ) 基于 剩余 的 和 参数， 设置 包装 集中 所 有 元 素 的 选项 值 ， 或 者 获取 


包装 集中 第 一 个 元 素 ( 必须 是 选项 卡 元 素 ) 的 选项 值 。 如 果 指 定 这 个 字符 
串 作 为 第 一 个 参数 ， 则 至 少 需要 提供 optionName 参数 


项 名 称 的 值 (参见 表 11-12 )。 如 果 提 供 
选项 的 值 。 如 果 没 有 提供 value 参数 ， 则 


( 字符 囊 ) 要 设置 或 者 返回 的 选 
value 参数 ， 则 这 个 值 就 成 为 
返回 已 命名 选项 的 值 

(数值 ) 用 来 标识 将 要 被 操作 的 选项 卡 从 零 开 始 的 下 标 。 用 在 tabs () 方 法 
的 如 下 变 体 中 : disable、enable、remove、select、 add、load 和 url 
(字符 串 ) 向 选项 卡 集 添 加 一 个 新 的 选项 卡 。 新 的 选项 卡 将 会 被 插入 到 
index 参数 指定 的 选项 卡 前 面 。 如果 没 有 提供 index， 新 选项 卡 会 被 放置 
在 选项 卡 列表 的 尾 言 

(字符 串 ) 指定 这 个 选项 卡 要 关联 的 面板 。 它 可 以 是 将 现 有 元 素 转变 为 面 
板 的 ia 选择 符 ， 也 可 以 是 用 来 创建 Ajax 选项 卡 的 服务 器 端 资源 URL 

( 宁 符 囊 ) 分 配给 新 选项 卡 的 标签 

(字符 串 ) 从 选项 卡 集 中 删除 下 标 标识 的 选项 卡 

(字符 囊 ) 使 下 标 标识 的 选项 卡 成 为 被 选择 的 选项 卡 
(字符 串 ) 强制 重新 加 载 下 标 标 识 的 选项 卡 ， 忽 略 缓存 
(字符 串 ) 改变 下 标 标识 的 选项 卡 的 关联 URL。 如 果 该 选 
选项 卡 ， 则 它 将 成 为 Ajax 选项 卡 

(字符 串 ) 返回 选项 卡 内 容 的 服务 器 端 资源 URL 

( 字符 串 ) 返回 包装 集中 第 一 次 匹配 的 选项 卡 集中 的 选项 卡 个 数 

(字符 串 ) 终止 任何 正在 进行 的 Ajax 选项 卡 加 载 操 作 以 及 任何 正在 运行 的 
动画 

(字符 串 ) 以 指定 的 间隔 设置 选项 卡 自动 循环 

( 数值 ) 选项 卡 集 循环 的 间隔 (以 毫秒 为 单位 ) 传 入 0 或 null 来 停止 一 
个 正在 进行 的 循环 过 程 

(布尔 ) 如 果 为 true， 则 循环 会 在 用 户 选择 某 个 
为 false 
(字符 串 ) 返回 选 


项 卡 不 是 Ajax 


选项 卡 后 继续 进行 。 默 认 


项 卡 部 件 元 素 ， 即 带 有 ui-tapbs 类 名 的 元 素 


包装 集 ， 除 了 返回 如 上 所 述 的 值 的 情况 
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和 预想 的 一 样 ， 如 此 复杂 的 部 件 有 相当 多 的 选项 (参见 表 11-12 )。 
像 往常 一 样 ， 我 们 提供 了 一 个 选项 卡 实验 室 来 帮助 你 学 习 整 理 tabs () 方 法 的 选项 。 可 以 从 
文件 chapterl1/tabs/lab.tabs.html 中 找到 这 个 实验 室 页 面 ， 显示 如 图 11-12 所 示 。 


ne | jjQuery in Action, 2nd Editior x¥/ | jQuery Ul Tabs Lab X ‘ob EE 


f《 > CG 省 安 http:y/ /localhost:80801/jqia2/chapterll/tabs/labtabs.html 


We jQuery UI Tabs Lab 合 ) 
Tab options 
cache: unspecified Otrue Ofalse 
collapsible: @ unspecified Otrue Ofalse 
cookie: @ unspecified © { expires: 7 } 
disabled: -| (array of indexes, e.g. [0,1]) 
event: 外 unspecified 名 dick © mouseover 


selected: @ unspecified OQ0 OQ1 OQ2 O30O-1 
spinner: @ unspecified O text O 〇 image 


Apply | Disable | Enable ] Reset ] 
Executed commands: 
s(testSubject’).tabs({}); 




















At 11:35:38.724 - tabsshow {index:0 ,tab:"A#tab for_ puppies',panel:'DIV#tab _ puppies'} 











图 11-12 jQuery UI 选项 卡 实验 室 页 面向 我 们 展示 了 如 何 使 用 选项 卡 将 一 系列 显示 内 容 
组 织 在 多 个 面板 中 
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注意 D000000000000 Aax000000000000 800000000 


Tomcat[ DUU URLUUUUDD 8080000 UU0U0D0D0UUUUDDUU Dnt 
www.bibeault.org/Jqgia2/chapterl 1/tabs/lab.tabs.htmil| | 


可 用 于 tabs () 方 法 的 选项 显示 在 表 11-12 中 。 


表 11-12 jQuery Ul 选项 卡 的 选项 








是 否 在 实验 
选 ”项 茹 述 和 
选 本 =" 室 页 面 中 
add ( 艺 数 ) 指定 在 选项 卡 集 上 创建 的 函数 ， 用 来 作为 tabsadd 事 件 的 事件 处 理 V 
器 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 需 的 信息 ) 请 参见 表 11-13 
ajaxOptions (对象 ) 指定 传人 $ .ajax() 中 任何 额外 的 选项 散 列 值 (在 选项 卡 集 的 任何 
Ajax 加 载 操 作 进 行 过 程 中 )。 关 于 这 些 选 项 的 细节 , 请 参考 第 8 章 对 $ .ajax () 
方法 的 描述 
cache (布尔 ) 如 果 为 true， 任何 通过 Ajax 加 载 的 内 容 将 会 被 缓存 。 否 则 ,会 重新 V 
加 载 Ajax 的 内 容 。 默 认为 false 
collapsible (布尔 ) 如 果 为 true， 则 选择 已 经 处 于 选中 状态 的 选项 卡 会 导致 它 变 为 未 选 V 








中 状态 ， 从 而 导致 没有 选项 卡 处 于 选中 状态 ， 还 会 折 著 面板 区 。 默 认 情 况 下 ， 
单 击 已 经 选中 的 选项 卡 没 有 任何 作用 
cookie (对象 ) 如 果 提 供 ， 使 用 cookie 插 件 来 记 住 最 后 选中 的 选项 卡 ， 并 且 在 页 面 Vv 
重新 加 载 时 恢复 选中 的 选项 卡 
这 个 对 象 的 属性 由 cookie 插 件 指定 : name、expires (单位 是 天 ) 、path、 
domain 和 secure 
使 用 此 选项 时 需要 预先 加 载 cookie 插 件 ( http://plugins.jquery.com/project/ 
cookie ) 
disable ( 函数 ) 指定 在 选项 卡 集 上 创建 的 函数 ， 用 来 作为 Labsdisable 事 件 的 事件 Vv 
处 理 袁 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 需 的 信息 ) 请 参见 表 11-13 
diaabled (数组 ) 包含 从 零 开 始 的 选项 卡 下 标 值 , 用 来 指定 初始 被 禁用 的 选项 卡 。 如 果 V 
未 指定 selected 选 项 (默认 为 0 ) ， 则 即使 数组 中 包含 下 标 0 也 不 会 禁用 第 一 
个 选项 卡 ， 因 为 这 个 选项 卡 是 默认 选中 的 

















enable ( 函数 ) 指定 在 选项 卡 集 上 创建 的 函数 , 用 来 作为 Labsenable 事 件 的 事件 处 Vv 
理 硕 。 有 关 这 个 事件 的 更 多 细节 (传人 处理 絮 的 信息 ) 请 参见 表 11-13 

event ( 字符 串 ) 指定 用 来 切换 选项 卡 的 事件 。 通 常 是 click ( 默认 值 ) 或 Vv 
mouseover，, 但 是 也 可 以 指定 其 他 事件 ， 如 mouseout 事 件 (尽管 有 点 奇怪 ) 

fx (对象 ) 指定 一 个 散 列 对 象 ， 用 来 配合 为 选项 卡 添 加 动画 效果 的 animate () 


方法 。 可 以 使 用 quration 属 性 来 指定 动画 方法 的 间 隅 值 : 训 秒 数 、.normal( 默 
认 值 ) 、slow 或 fast。 也 可 以 指定 位 于 0.0 ~ 1.0 数 字 区 间 内 的 opacity 必 性 

idPprefix (字符 串 ) 如 果 选 项 卡 锚 点 上 没有 title 特 性 , 则 为 动态 内 容 的 选项 卡 面板 生 
成 唯一 的 id 值 时 指定 前 级 值 。 如 果 省 略 ， 则 默认 使 用 ui -tabs- 
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选 项 


load 


panelTemplate 


remMOVE 


select 


selected 


show 


spinner 


tabTemplate 





摘 述 


( 函数 ) 指定 在 选项 卡 集 上 创建 的 函数 ， 用 来 作为 taps1load 事 件 的 事件 处 理 
器 。 有 关 这 个 事件 的 更 多 细节 《传人 处 理 需 的 信息 ) 请 参见 表 11-13 

(字符 串 ) 动态 创建 选项 卡 面板 时 使 用 的 HTML 模 板 。 这 个 行为 可 能 是 adg 方 
法 的 结果 ， 也 可 能 是 自动 创建 Ajax 选 项 卡 的 结果 。 默 认 情 况 下 ,使 用 模板 
"<div></div>" 

( 也 数 ) 指定 在 选项 卡 集 上 创建 的 函数 ,用 来 作为 Labsremove 事 件 的 事件 处 
理 硕 。 有 关 这 个 事件 的 更 多 细节 〈 传 人 处 理 需 的 信息 ) 请 参见 表 11-13 

( 浮 数 ) 指定 在 选项 卡 集 上 创建 的 函数 ,用 来 作为 Labsselect 事 件 的 事件 处 
理 禹 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 需 的 信息 ) 请 参见 表 11-13 

( 数字 ) 初 始 选中 的 从 零 开始 的 选项 卡 下 标 。 如 果 省 略 , 则 选中 第 一 个 选项 卡 。 
可 以 使 用 值 -1 在 初始 时 不 选中 任何 选项 卡 

( 函数 ) 指定 在 选项 卡 集 上 创建 的 函数 ， 用 来 作为 Lapsshow 事 件 的 事件 处 理 
天 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 需 的 信息 ) 请 参见 表 11-13 

(字符 串 ) 当 获 取 远 程 内 容 时 显示 在 Ajax 选 项 卡 上 的 HTML 字 符 串 。 默 认 字 符 
串 是 "<em>Loading&#8230;</em>" ( 租 入 的 表示 省 略 号 的 HTML 实体 字符 
是 Unicode 字 符 。) 

为 了 显示 正在 加 载 的 提示 ,选项 卡 销 点 元 素 的 内 容 必 须 是 <span> 元 素 ,例如 : 

<1i><a href="/jqia2/lengthyTab"><span>Slow</span></a></11i> 

(字符 串 ) 当 使 用 aqa 方 法 创建 新 的 选项 卡 时 用 到 的 HTML 模 板 。 如 果 省 略 ， 则 默 
认 值 为 "<1L1><a href="#{href}"><span>#{label}</span></a></1i>" 


在 模板 中 ， 符 号 #{href} 和 #1{1label} 会 被 传人 人 add 方法 的 值 所 代替 



































( 续 ) 
是 否 在 实验 
室 页 面 中 
v 


你 现在 应 该 对 本 书 中 的 各 种 实验 室 页 面 非常 束 悉 了 , 在 选项 卡 实验 室 中 尝试 基本 选项 时 应 该 
不 需要 任何 帮助 了 。 不 过 我 想 确 保 你 理解 关于 Ajax 选项 卡 的 一 些 重要 的 细微 差别 ， 因 此 下 面 列 
出 了 一 些 实验 室 练 习题 ， 你 可 以 在 尝试 了 基本 选项 后 进行 练习 。 











口 练习 1 一 一 打开 实验 室 页 面 ， 保 持 所 有 控件 处 于 它们 的 默认 状态 ， 单 击 Apply。Food 和 
Slow 选项 卡 是 Ajax 选项 卡 ， 它 们 的 面板 在 选中 选项 卡 之 后 加 载 。 
单 击 Food 选项 卡 。 这 个 选项 卡 会 从 HTML 源 加 载 并 立即 显示 出 来 。 注 意 控制 台 的 
tabsload 事件 。 它 意味 看 已 经 从 服务 融 加 载 了 内 容 。 
单 击 Flowers 选项 卡 ， 然 后 再 次 单 击 Food 选项 卡 。 注 意 ， 当 内 容 再 次 从 服务 需 加 载 时 兄 
一 个 tabsload 事件 是 如 何 被 触发 的 。 

口 练习 2 一 一 重 置 实验 室 。 为 cache 选择 true 选项 ， 单 击 Apply。 

重复 练习 1 的 动作 ， 注 意 这 次 Food 选项 卡 只 有 在 它 第 一 次 被 选择 时 才 加 载 。 

口 练习 3 一 一 重 置 实验 室 ， 保 持 所 有 控件 的 默认 状态 ， 单 击 Apply。 
重复 练习 1， 只 不 过 这 次 单 击 Slow 选项 卡 而 不 是 Flowers 选项 卡 。Slow 选项 卡 从 服务 带 


资源 加 载 ， 这 需要 10 秒 钟 的 时 间 。 注 意 在 长 时 间 的 加 载 操 作 中 ， 黑 认 信 “Loading..…” 











如 何 显 示 的 ， 以 及 tabsload 事件 是 如 何在 接收 到 内 容 后 触发 的 。 
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口 练习 4 一 一 重 置 实验 室 ， 为 spinner 选项 选择 image 值 ， 单 击 Apply。 
重复 练习 3 的 动作 。 这 次 的 加 载 过 程 会 在 选项 卡 上 显示 一 个 <img> 元 素 的 HTML。 你 一 定 
不 能 错过 这 个 效果 。 





11.6.2 ”选项 卡 事件 


当 用 户 单 击 选项 卡 时 ， 我 们 可 能 想 要 得 到 通知 ,这 样 的 理由 人 举 不 胜 举 。 例 如 ,我 们 可 能 想 要 
等 到 用 户 真 正 选 择 一 个 选项 卡 时 才 在 选项 卡 内 容 上 执行 一 些 初 始 化 事件 。 毕 竟 ,， 为 什么 要 在 用 户 
可 能 根本 不 会 查看 的 选项 卡 上 做 大 量 内 容 初始 化 的 工作 呢 ? 对 于 已 经 加 载 的 内 容 直 理 相 同 。 我 们 
可 能 想 要 在 内 容 加 载 后 执行 一 些 任务 。 

为 了 帮助 我 们 在 适当 的 时 候 操 作 选 项 卡 和 选项 卡 内 容 , 表 11-13 列 出 了 在 选项 卡 集 的 生命 周 
期 内 不 同时 间 所 触发 的 事件 。 向 每 个 事件 处 理 融 传人 的 第 一 个 参数 是 事件 实例 , 第 二 个 参数 是 目 
定义 对 象 ， 其 属性 由 三 个 元 素 构 成 : 

D indqex 一 一 与 事件 关联 的 从 零 开始 的 选项 卡 索引 ; 

口 tab 一 一 与 事件 关联 的 选项 卡 锁 点 元 系 的 引用 |; 



































口 panel 一 一 与 事件 关联 的 选项 卡 面板 元 素 的 引用 。 
表 11-13 ”jQuery Ul 选项 卡 事件 
事 件 选 项 描 述 
tabsadd add 当 向 选项 卡 集 添加 新 的 选项 卡 时 触发 
tabedlsadle disable 当 禁 用 选项 卡 时 触发 
tabsenable eniable 当 启 用 选项 卡 时 触发 
tabsload Load 当 一 个 Ajax 选项 卡 内 容 加 载 后 触发 (甚至 出 错时 也 触发 ) 
tabsremove remove 当 删 除 选项 卡 时 触发 
tabsselect select 当 单 击 某 个 选项 卡 被 单 击 、 将 要 成 为 选中 的 选项 卡 〈 除非 这 个 回 
调 函 数 返回 false， 这 种 情况 下 会 取消 本 次 选择 ) 时 触发 
tabsshow show 当 显 示 选 项 卡 面板 时 触发 


作为 示例 ， 假 设想 要 为 通过 Ajax 加 载 的 所 有 选项 卡 面板 中 的 网 片 元 系 添 加 一 个 类 名 ， 可 以 
使 用 建立 在 选项 上 E 集 上 的 单个 tabsload 人 处理 亲 来 实现 . 


Ss('#theTabset') .bind('tabsload',function(event,1info)t 
Ss('img',info.panel) .addClass('imageInATab'); 
}); 


这 个 小 示例 中 有 几 个 重要 的 知识 点 : 

口 info .panel 属性 引用 受到 影 啊 的 面板 ; 

口 触发 tabsload 事件 时 面板 的 内 容 已 经 加 载 完 毕 。 

下 面 就 来 癌 这 些 元 素 添 加 一 些 CSS 类 名 ， 以 便 我 们 使 用 这 些 类 名 来 修改 元 素 的 样式 。 
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11.6.3 ”修改 选项 卡 样式 


当 创 建 一 个 选项 卡 集 时 ， 下 面 的 CSS 类 名 就 被 应 用 到 各 种 组 成 元 素 上 。 

DQ ui-tabs 沃 加 到 选项 卡 集 元 素 的 类 名 。 

D ui-tabs-nav 一 一 添加 到 包含 选项 卡 的 无 序列 表 元 素 上 的 类 和 名。 

Dui-tabs-selected 添加 到 选中 选项 卡 的 列表 项 的 类 多 。 

uitabs=panel 添加 到 选项 卡 面板 的 类 名 。 

你 是 否认 为 默认 泻 染 的 选项 卡尺 十 太 大 了 ? 可 以 使 用 如 下 样式 规则 将 它们 缩小 到 合适 的 
尺寸 : 














ul.ui-tabs-nav { font-size: 0.5em; } 

你 想 让 选中 的 选项 卡 突出 显示 吗 ? 和 尝试 下 面 样式 : 

li.ui-tabs-selected a { background-color: crimson; } 

选项 卡 是 一 个 很 梭 的 常用 部 件 , 用 来 组 织 包含 相关 内 容 的 各 种 面板 ,以 便 用 户 每 次 只 能 看 到 
一 个 面板 。 但 是 如 果 觉 得 这 个 部 件 太 俗气 ， 而 想 使 用 不 太 通 用 的 外 观 和 感觉 来 达到 相同 的 目的 ， 
该 怎么 办 ? 

下 面 介 绍 的 手 风 雄 部 件 可 能 正好 满足 你 的 需求 。 

















11.7 手风琴 部 件 


尽管 手风琴 这 个 词 可 能 让 你 想起 留 着 小 胡子 的 男人 在 次 情 地 演奏 着 小 夜曲 , 但 在 这 里 它 是 一 
个 部 件 的 名 称 ， 用 来 每 次 呈现 一 个 内 容 面 板 ( 就 像 选项 卡 一 样 )， 这 样 的 布局 令 人 联想 到 真实 的 
手 风 雁 乐 妖 。 

与 在 面板 区 域 的 上 部 显示 一 组 选项 卡 不 同 , 手风琴 将 可 选项 作为 一 系列 堆放 在 一 起 的 水 平 条 
来 呈现 , 每 个 水 平 条 的 内 容 显 示 在 当前 水 平 条 和 下 一 个 水 平 条 之 间 。 如 果 你 已 经 使 用 过 代码 示例 
的 索引 页 ( 根 目 录 的 index.html )， 那 你 就 已 经 看 到 过 手 风 芙 部件 了 ， 如 图 11-13 所 示 。 

和 选项 卡 集 一 样 ， 每 次 只 能 打开 手 风 雄 部 件 的 一 个 面板 。 上 默认 情况 下 ， 手 风 雁 部 件 也 会 调整 
每 个 面板 的 尺寸 以 便 部 件 所 占用 的 空间 都 是 一 样 的 ( 在 无 论 打 开 哪 个 面板 的 情况 下 )。 这 使 得 手 
风琴 部 件 成 为 页 面 上 比较 受 欢迎 的 部 件 之 一 。 

下 面 来 看 看 如 何 创建 手 风 凌 部 件 。 
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.OO 


YY jQueryinActon, 2nd Editior x W250 | 





写作 | 窗 http:/ /localhost/jqia2/index.html#chapters 


Collapsible Module — Take 1 
Collapsible Module 一 Take 2 
Collapsible Module — Take 3 
jQuery Effects Lab 

Custom Effects Demo 
Revolutions Experiment 
Queuling/Dequeuling -~ manual 
Queuing/Dequeuing ~ automatlic 
Effects Queue 


» Chapter 6 
» Chapter 7 
+ Chapter 8 


» Chapter 9 


上 Chaprer 10 


图 11-13 使 用 手风琴 部 件 来 组 织 本 书 中 众多 代码 示例 的 链接 





11.7.1 创建 手风琴 部 件 


和 选项 卡 集 一 样 ， 手 风疹 部 件 需要 一 个 特别 的 HTML 结构 来 创建 。 由 于 手 风 雄 部 件 拥有 一 
个 不 同 的 布局 ， 而 且 为 了 确保 在 缺少 JavaScript 时 页 面 能 够 渐进 消退 ”( gracefully degrade )， 因 此 
手 风 和 从 部件 的 源 结构 和 选项 卡 集 的 源 结构 大 不 相同 。 

手 风 和 雁 部 件 需 要 一 个 外 部 的 容 豆 (accordqion () 方 法 应 用 到 的 元 系 )， 其 中 包含 成 对 出 现 的 
标题 和 相关 的 内 容 。 它 不 是 使 用 href 值 来 将 内 容 面板 和 标题 关联 起 来 ， 而 是 ( 默认 ) 在 每 个 标 
题 后 面 么 跟着 作为 下 一 个 兄弟 节点 的 内 容 面板 。 

典型 的 手 风 芬 部 件 的 结构 如 下 所 示 : 








中 渐进 消退 ( Gracefully Degrade ) 和 不 唐 突 的 JavaScript ( Unobtrusive JavaScript ) 都 是 Web 2.0 中 的 流行 术语 ， 详 
情 请 参阅 维基 百科 : http://en.wikipedia.org/wiki/Graceful degradation。 
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<div id="accordion"> 


<h2><a href="#">Header 1</a></h2> 
<div id="contentPanel 1"> ... content ... </div> 


<h2><a href="#">Header 2</a></h2> 
<div id="contentPanel 2"> ... Content ... </div> 


<h2><a href="#">Header 3</a></h2> 
<div id="contentPanel 3"> ... Content ... </div> 


</div> 








主意 ， 标 题 文 本 还 是 被 舱 入 在 一 个 销 扣 元 系 中 (为 了 给 用 户 一 个 可 获取 焦点 的 元 系 ), 但 是 
ee 点 的 href 特性 设置 为 #， 而 不 用 来 关联 标题 和 它 的 内 容 面 板 。( 有 一 个 选项 使 得 锚 点 的 


href 值 非 党 


accordion ( 


意义 ",， 但 是 通常 将 其 设置 为 # )。 


) 方 法 的 培 法 如 下 所 未 。 


命令 语法 : accordion 


accordion(options) 


accordion('disable') 


accordion('enable') 


accordion('destroy') 


accordion('option', optionName, value) 


accordion('activate', index) 


accordion('widget') 


accordion('resize') 


将 手 风 傅 HTML 源 结 构 ( 本 节 前 面 所 述 ) 转变 为 手 风 骏 部 件 


options (对 象 ) 要 应 用 到 手风琴 部 件 的 散 列 对 象 的 选项 ， 参 见 表 11-14 

‘disable' (字符 串 ) 蒜 用 手风琴 部 件 

enable' (字符 串 ) 重新 启用 一 个 被 禁用 的 手风琴 部 件 

‘destroy,' (字符 串 ) 使 任何 转变 为 手风琴 部 件 的 元 素 恢复 到 其 初始 状态 

:option， ( 字符 囊 ) 基于 剩余 的 参数 ， 设 置 包 3 装 集 中 所 有 元 素 的 选项 值 ， 或 者 获取 和 包 
装 集中 第 一 个 元 素 〈 必 须 是 手风琴 元 素 ) 的 选项 值 。 如 果 指 定 这 个 字符 串 作 
为 第 一 个 参数 ， 则 至 少 需要 提供 optionName 参数 

optionName “ (字符 串 ) 要 设置 或 返回 的 选项 名 称 的 值 (参见 表 11-14 )。 如 果 提 供 value 
参数 ， 则 这 个 值 就 成 为 选项 的 值 。 如 果 没 有 提供 value 参数 ， 则 返回 已 命名 
选项 的 值 

‘activate' 《字符 串 ) 激活 (打开 ) 由 index 参数 标识 的 内 容 面 板 

QD 这 里 指 的 应 该 是 navigation 选项 ， 下 文 会 有 详细 描述 。 
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(数值 | 选择 器 | 布尔 ) 用 来 标识 将 要 被 激活 的 手风琴 面板 从 零 开 始 的 下 标 ， 或 
标识 面板 的 选择 器 ， 或 false (如 果 指 定 collapsible 选项 为 true 的 话 ， 
会 关闭 所 有 的 面板 ) 

( 字符 事 ) 返回 手风琴 部 件 元 素 ( 也 即 是 带 有 ui-accordqion 类 名 的 元 素 ) 
( 字符 串 ) 重新 计算 部 件 的 尺寸 。 应 该 在 可 能 触发 部 件 尺 寸 改 变 的 事件 发 生 
时 调用 这 个 方法 ; 例如 ， 改变 容器 的 尺寸 


包装 集 ， 除 了 返回 如 上 所 述 的 值 的 情况 


简短 但 功能 强大 的 accordion() 方 法 的 选项 列表 参见 表 11-14。 
在 你 通 谈 表 11-14 中 的 选项 列表 时 ， 可 以 在 实验 室 中 进行 相应 的 练习 。 


选 项 


active 


animated 


autoHeight 


clearStyle 


change 


changestart 


collapsible 


disabled 


event 


fillSpace 


表 11-14 ”jQuery Ul 手风琴 部 件 的 选项 


棋 。 述 是 否 在 实验 
室 页 面 中 
(数值 布尔 | 选择 器 | 元素 jQuery ) 指定 哪个 面板 是 初始 打开 的 。 它 可 以 是 从 零 开 v 





始 的 面板 下 标 ， 或 者 一 种 标识 面板 标题 元 素 的 方法 : 元 素 引 用 、 选 择 需 或 jQuery 
包装 集 
如 果 指 定 为 false， 则 在 初始 时 不 会 打开 任何 面板 〈 除 非 设 置 co11apsible 
为 false ) 
(字符 串 | 布尔 ) 当 打 开 和 关闭 手 风 稚 面板 时 使 用 的 动画 名 称 。 可 以 是 slide ( 默 V 
认 值 ) 、bouncesliqe 或 任何 安装 的 组 动 特效 〈 如 果 已 经 包含 在 页 面 上 ) 。 
如 果 指 定 为 fEalse， 则 不 使 用 动画 
(布尔 ) 除非 指定 为 false， 否则 所 有 面板 的 高 度 都 被 强制 调整 为 最 高 面板 的 V 
高 度 ， 所 有 的 面板 具有 相同 的 尺寸 。 否 则 ,各 个 面板 保持 它们 的 自然 尺寸 。 默 认 
为 true 
(布尔 ) 如 果 为 true， 则 会 在 动画 结束 后 清除 height 和 overflow 样 式 。 要 
应 用 这 个 选项 ， 必 须 设置 autoHeight 选 项 为 false 











( 孔 数 ) 指定 在 手 风 寻 部 件 上 创建 的 函数 ， 用 来 作为 accordionchange 事 件 Vv 
的 事件 处 理 右 。 有 关 这 个 事件 的 更 多 细节 《传人 处 理 需 的 信息 ) 请 参见 表 11-15 
( 函数 ) 指 定 在 手 风 鞭 部 件 上 创建 的 也 数 ,用 来 作为 accordionchangestart v 


事件 的 事件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 器 的 信息 ) 请 参见 表 
11-15 


(布尔 ) 如 果 为 true,， 单 击 已 经 打开 的 手 风 蕉 面板 标题 栏 会 天 财 此 面板 ， 使 得 
没有 面板 处 于 打开 状态 。 软 认 情 况 下 , 单 击 已 经 打开 的 面板 标题 栏 没有 任何 作用 


(布尔 ) 如 果 指 定 并 且 为 true， 则 手 风 和 大 部 件 初 始 是 被 禁用 的 


(字符 串 ) 指定 切换 手风琴 标题 栏 的 事件 。 通 常 是 click (默认 值 ) 或 v 
mouseover， 但 是 也 可 以 指定 其 他 事件 ， 如 mouseout 的 事件 (尽管 有 点 奇怪 ) 


(布尔 ) 如 果 为 true， 则 手 风 鞭 会 调整 尺寸 ， 完 全 填充 父 元 素 的 高 度 ， 窗 疙 
autoHeight 选 项 的 值 
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选 项 
header 
icons 
navigation 
navigation- 
Filter 


( 续 ) 


是 否 在 实验 


苗 ] 术 
描述 室 页 面 中 








( 选择 器 |jQuery ) 指定 选择 器 或 元 素来 槛 盖 默 认识 别 标题 元 素 的 模式 。 默 认 值 
是 ">1i>:firstchild,>:not (1i) :even"。 只 有 当 你 为 手 风 鞭 指定 一 个 不 
符合 默认 模式 的 源 结构 时 才 使 用 这 个 选项 


(对象 ) 用 来 定义 显示 在 打开 和 关闭 面板 标题 栏 文字 左 侧 的 图 标的 对 象 。 用 来 V 
指定 关闭 的 面板 图 标的 属性 名 为 header， 而 用 来 指定 打开 的 面板 图 标的 属性 名 
为 headerSelected 


这 些 属性 的 值 是 用 来 标识 网 标 类 名 的 字符 串 , 定义 在 按钮 部 件 中 参见 11.1.3 节 。 


默认 情况 下 ,header 属 性 值 是 ui-icon-triangle-1-e,headerSelected 
的 属性 值 是 ui-icon-triangle-1-s 


(布尔 ) 如 果 为 true， 则 当前 地 址 ( location.href ) 被 用 来 尝试 匹配 手 风 
奔 标 题 柱 中 销 点 标签 的 nref 值 。 这 可 以 用 来 在 页 面 显 示 的 时 候 打 开 特 定 的 手 风 
芬 面 板 


例如 ,设置 href 的 值 为 锚 点 散 列 值 例如 #chapterl (诸如 此 类 ) ， 如 果 URL 
(或 者 收藏 夹 地 址 ) 的 后 缀 拥有 相同 的 散 列 值 ， 就 会 在 页 面 显 示 的 时 候 打 开 相 应 
的 面板 。 代 码 示 例 的 index.html 页面 使 用 了 这 种 技术 。 试 试看 ! 将 
index.html#chapter3 作 为 URL 的 一 部 分 来 访问 示例 页 面 


(函数 ) 如 果 navigation 选 项 为 true， 履 善 默认 的 导航 过 滤器 "。 你 可 以 使 
用 这 个 函数 将 navigation 选 项 所 描述 的 行为 改变 成 任何 你 所 期 望 的 行为 

调用 这 个 回调 函数 时 没有 任何 参数 ， 标 题 栏 中 的 锚 点 标签 被 设置 为 图 数 上 下 
文 。 返 回 true 意 味 着 一 次 导航 匹配 发 生 了 









































我 们 提供 了 手 风 奔 实验 室 页 面 (在 文件 chapterl1l/accordionslab/accordions.html 中 )， 用 来 演 
示 很 多 选项 的 用 法 。 页 面 如 图 11-14 所 示 。 








在 学 习 一 些 基本 的 选项 以 及 在 手风琴 实验 室 页 面 尝 试 运 用 这 些 选项 之 后 , 下面 列 出 了 一 些 练 
习题 ， 你 千 万 不 能 错过 。 

口 练习 1 一 一 加 载 实验 室 ， 保 持 所 有 设置 的 默认 值 ， 单 击 Apply。 随 意 选 中 各 个 标题 栏 ， 注 
意 当 面板 打开 和 关闭 时 ， 手 风 稚 部件 本 喘 是 如 何 保持 自身 尺寸 不 变化 的 。 

口 练习 2 一 一 重 置 实验 室 , 为 autoHeight 选择 false, 单 击 Apply。 进行 练习 1 中 的 动作 ， 
注意 这 次 当 Flowers 面板 打开 的 时 候 ， 手 风琴 部 件 的 高 度 缩小 ， 正 好 适合 Flowers 面板 内 
容 的 尺寸 ( 比较 短 )。 

接 下 来 该 处 理 那些 在 操作 手 风 和 雁 部 件 时 所 触发 的 事件 了 。 


GD 查看 jQuery UI 的 源 代 码 ， 你 会 发 现 这 个 默认 函数 非常 简单 : 
navigationFilter: function() { 
return this.href.toLowerCase() === location.href.toLowerCase():; 


} 


同时 也 请 注意 函数 上 下 文 (this ) 被 设置 成 了 标题 栏 中 的 销 点 元 素 。 
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总 ee [jQuery in Action, 2nd Editio' 其 jQuery Ul Accordions Lab 其 ICH ”7 


> CC 全 穴 http://localhost/jqia2 /chapterll /accordions/lab.accordions.html 


Ee jQuery UI Accordions Lab 拿 ， ) 


Accordion options 
active: @ unspecified Oo OQ1 OQ2 Ofalse 
animated: @ unspecified O slide OQ bounceslide © fade © false 
autoHeight: @ unspecified Otrue Ofalse 
collapsible: unspecified Otrue Ofalse 
event: @ unspecified O dlick O mouseover 


header icon: | 一 unspecified 一 "3] 


headerSelected { — unspecified = 
icon: 


| | Apply 有 Disable ]| Enable 上 | Reset ] 
Executed commands: 
$('testSubject').accordion({ }); 

















» Flowers 





» Food 





图 11-14 jQuery UI 手 风 共 实验 室 说 明了 如 何以 新 络 时 尚 的 方式 回 用 户 展 示 一 系列 的 内 容 面板 


11.7.2 手风琴 部 件 的 事件 


当 用 户 打 开 和 关闭 面板 时 ， 手 风琴 部 件 只 会 触发 两 个 类 型 的 事件 ， 参 见 表 11-15。 
向 每 个 处 理 器 传人 通常 的 事件 实例 和 自 定 义 对 象 。 对 于 两 个 事件 类 型 而 言 ， 自 定义 对 象 都 由 CE 


下 面 这 些 属性 组 成 。 
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口 options 创建 部 件 时 传人 accordion() 方 法 的 选项 。 

口 oldHeader 一 一 包含 之 前 打开 面板 的 标题 元 系 的 jQuery 包装 集 。 如 果 之 前 没有 打开 任何 
面板 ， 则 这 个 属性 为 空 。 

口 newHeader 一 一 包含 当前 打开 面板 的 标题 元 条 的 jQuery 包 污 集 。 对 于 可 折 著 的 手 风 鞭 部 
件 *"， 当 所 有 面板 都 关闭 时 ， 这 个 属性 为 空 。 

口 oldContent 一 一 包含 之 前 打开 面板 引用 的 jQuery 包装 集 。 

国 | newContent 一 一 包 合 当前 打开 面板 3 用 的 ]Query 包装 集 o 

表 11-15 列 出 了 手 风 和 雁 部 件 的 各 种 事件 。 


表 11-15 ”jQuery UI 手风琴 部 件 的 事件 





























事 件 选 项 描 述 
accordionchangestart changestart 当 手 风 琵 的 选择 项 将 要 改变 时 触发 
accordionchange change 在 手风琴 的 选择 项 已 经 改变 后 ( 在 用 来 改变 显示 的 任何 


动画 过 程 结束 之 后 ) 触发 


这 是 一 个 相当 短 的 事件 列表 ， 它 也 的 确 提 出 了 一 些 挑 战 。 例 如 ， 当 打开 初始 面板 (如果 存在 
的 话 ) 时 ， 我 们 不 会 收 到 任何 通知 ， 这 一 点 很 让 人 失望 。 我 们 将 会 看 到 当 试 图 使 用 这 些 事件 来 操 
作 手 风 众 部 件 时 ,事件 变 得 有 点 麻烦 ,但 是 在 学 习 这 些 事件 来 为 手 风 鞭 部 件 添加 功能 的 示例 之 前 ， 
先 来 考察 一 下 jQuery UI 癌 构 成 手 风 芬 部 件 的 元 素 所 添加 的 CSS 类 名 。 


11.7.3 手风琴 部 件 的 样式 类 名 


和 选项 卡 部 件 一 样 ，jQuery UI 辐 组 成 手 风 雁 部 件 的 元 素 添 加 了 很 多 CSS 类 名 。 这 些 类 名 不 
仅 可 以 用 来 为 手 风 徐 添加 样式 ， 而 且 可 以 用 来 通过 jQuery 选择 硕 查 找 元 系 。 在 上 一 玫 学 习 如 何 
找 出 涉及 手 风 众 事件 的 面板 时 ， 我 们 就 曾 见 到 过 类 似 的 示例 。 

下 面 是 应 用 到 手 风 众 元 系 的 类 和 名。 
添加 到 手 风 众 部 件 外 部 容器 ( 在 其 上 调用 accordqion () 方 法 的 元 素 ) 

















UD ui-accordion 
的 类 名 。 
UD ui-accordion-header 添加 到 成 为 可 单 击 的 所 有 标题 元 素 的 类 名 。 
D ui-accordion-content 一 一 添加 到 所 有 面板 元 系 的 类 名 。 
分 配给 当前 打开 面板 元 素 ( 如 采 存 在 的 话 ) 的 类 名 。 
D ui-state-active 一 一 分 配给 当前 打开 面板 (如 采 存 在 的 话 ) 的 标题 元 素 的 类 名 。 注 意 
这 是 多 个 部 件 共享 的 通用 jQuery UI 类 名 中 的 一 个 。 
使 用 这 些 类 名 ， 可 以 重新 将 手 风 稚 元 系 改 造成 我 们 高 欢 的 样子 ， 就 像 对 选项 卡 所 做 的 那样 。 
请 杀 目 答 试 改变 元 素 的 样式 : 例如 标题 文学 ， 或 者 围绕 面板 的 边框 。 























Dui-accordion-content-active 














中 可 折 炙 的 手风琴 部 件 ， 也 即 是 在 调用 accordion () 方 法 时 设置 collapsible 选项 为 true。 
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下 面 来 看 一 下 这 些 类 名 是 如 何 帮助 我 们 为 手风琴 部 件 添 加 功能 的 。 


11.7.4 ”使 用 Ajax 加 载 手 风琴 面板 


手 风 蕉 部 件 缺少 的 一 个 特征 〈 存 在 于 它 的 “ 兄 脂 ”选项 卡 部 件 中 )， 是 源 生 通 过 Ajax 加 载 内 
容 的 能 力 。 为 了 不 让 手 风 花 部 件 “ 忍 受 ” 这 种 目 宪 感 ， 下面 就 来 看 看 如 何 使 用 现 有 的 知识 轻松 地 
为 手 风 蕉 部 件 添加 这 个 功能 。 

选项 卡 部 件 使 用 销 点 标签 的 href 来 指定 远程 内 容 的 地 址 。 然 而 ， 手 风 雁 部 件 忽 略 了 标题 栏 
中 销 点 标签 的 nref 值 ， 除 非 使 用 navigation 的 情况 。 理 解 这 一 点 ， 我 们 将 可 以 安全 地 使 用 它 
来 指定 需要 加 载 到 面板 中 任何 远程 内 容 的 地 址 。 

这 是 一 个 不 错 的 决定 ， 因 为 它 和 选项 卡 的 工作 方式 你 持 一 致 〈 一 致 性 是 件 好 事情 ), 并 且 它 
意味 着 无 需 引 入 自 定 义 选 项 或 特性 来 记录 这 个 地 址 。 我 们 将 保持 “普通 ”面板 的 href 特性 值 
为 #。 

我 们 想 要 在 每 当 将 要 打开 面板 时 加 载 面板 的 内 容 ,， 因此 使 用 如 下 代码 向 手 风 俊 部 件 ( 可 能 


多 个 ) 绑 定 accordionchangestart 事件 : 














S$S('.ui-accordion') .bind('accordionchangestart',function(event,info)t 
if (info.newContent.length == 0) return; 
Var href = $('a',info.newHeader) .attr('href').; 
If (href.charAt (0) 1= '#') { 
info.newContent.1load (href).， 
Ss('a',info.newHeader) .attr('href','#'); 
} 
ls 


在 这 个 处 理 需 中 ,首先 通过 info .newCcontent 提供 的 引用 找到 打开 的 面板 。 如 果 不 存 在 打 
开 的 面板 〈( 可 能 存在 于 可 折 钱 的 手 风 众 部 件 中 )， 则 返回 。 

然后 通过 info .newHeader 提供 的 引用 上 下 文 找到 <a> 元 素 ( 也 即 是 找到 激活 标题 栏 中 的 销 
点 元 素 )， 并 获取 它 的 nref 特性。 如 采 此 特性 值 不 是 以 # 开 头 的 ,我 们 就 假设 它 是 一 个 提供 面板 
内 容 的 远程 URL。 

为 了 加 载 远 程 内 容 ， 我 们 使 用 1o0ad() 方 法 ,然后 改变 销 点 的 href 特性 值 为 #。 最 后 这 个 动 
作 是 为 了 防止 下 次 打开 面板 时 再 次 从 远程 获取 内 容 。( 为 了 强制 每 次 重新 加 载 内 容 ， 需 要 删除 
href 峰值 语 句 。) 

当 使 用 这 个 处 理 带 时 ， 为 了 防止 出 现 问 题 ， 在 预先 不 清楚 最 大 面板 尺寸 的 时 候 ， 我 们 可 能 想 
要 关闭 autoHeight 选项 ,这 种 实现 的 可 运行 示例 位 于 文件 chapterl1/accordions/ajax/ajax-accordion. 
html 中 。 

像 往 常 一 样 ， 总 会 有 不 同方 式 的 实现 。 尝 试 下 面 这 个 练习 。 

口 练习 1 一 一 如 果 你 想 避 人 免 使 用 href 值 ， 以 便 可 以 使 用 navigation 选项 ,要 如 何 重新 编 

写 这 个 示例 来 使 用 目 定 义 特性 〈 或 者 你 选 定 的 其 他 策略 ) ? 

手 风 和 从 部 件 回 我 们 提供 了 除 选 项 卡 面板 之 外 的 另 一 种 选择 , 用 来 连 组 地 辐 用 户 呈 现 相 关 的 内 

容 。 现 在 让 我 们 结束 对 这 个 部 件 的 讨论 ， 来 看 看 男 一 个 动态 呈现 内 容 的 部 件 。 
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11.8 ”对 话 框 


对 话 框 这 个 概念 根本 无 需 介 绍 。 目 从 图 形 用 户 界 面 (GUI) 出 现 以 来 ， 对 话 框 (无论 是 模式 
的 还 是 非 模式 的 ) 就 是 昌 面 应 用 程序 设计 的 一 个 常用 的 主要 手段 , 用 来 从 用 户 获取 信息 或 癌 用 户 
传递 信息 。 

然而 , 在 Web 界面 中 除了 内 置 的 JavaScript 警告 提示 和 确认 工具 ， 对话 框 并 不 是 本 来 就 有 的 
概念 。 这 些 工 具 由 于 各 种 原因 被 认为 是 不 合适 的 , 其 中 主要 的 原因 是 不 能 修改 它们 的 样式 来 和 站 
点 的 样式 保持 一 致 ， 因 此 这 些 工 具 一 般 只 用 作 调 试 助 手 。 

下 浏览 硕 引 入 了 基于 Web 对 话 框 的 概念 ， 但 是 它 不 足以 吸引 标准 社区 的 注意 ， 仍 然 只 是 一 
个 私有 的 解决 方案 ”。 

多 年 来 , Web 开发 者 使 用 window.open () 方 法 来 创建 代表 对 话 框 的 新 窗 体 。 虽 然 充 满 了 问题 ， 
但 是 这 种 方法 作为 非 模式 对 话 框 的 解决 方案 是 合适 的 ， 然 而 却 无 法 像 真 正 的 模式 对 话 框 那样 工作 。 

随 着 JavaScript、 浏 览 锅 和 DOM 操作 的 流行 ， 开 发 者 本 号 也 变 得 强大 起 来 ， 能 够 使 用 这 些 
基本 的 工具 来 创建 “浮动 ”在 页 面 上 的 元 素 ( 其 至 是 以 模式 的 方式 来 锁定 输入 元 床 )， 这 更 加 接 
近 非 模式 和 模式 对 话 框 的 语义 。 

此 ,虽然 在 概念 上 ， 对 话 框 在 Web 界面 中 并 不 是 真实 存在 的 ， 但 是 我 们 通过 目 己 的 努力 
使 对 话 框 看 起 就 像 存 在 于 Web 界面 中 。 

下 面 来 看 看 在 这 个 领域 jQuery UI 为 我 们 提供 了 什么 。 


















































11.8.1 创建 对 话 框 


尽管 页 面 内 对 话 框 的 想法 看 起 来 很 傈 单 [只 是 从 页 面 流 中 删除 一 些 内 容 ， 使 用 一 个 高 的 
z-index 将 其 浮动 起 来 ， 然 后 为 其 添加 一 个 “边框 ”〈(chrome ) ]， 但 是 还 有 很 多 细节 需要 考虑 。 竺 
运 的 是 ,jQuery UI 会 处 理 这 些 细 节 ， 人 允许 我 们 创建 非 模式 和 模式 对 话 框 ， 并 市 有 高 级 的 特征 ， 
例如 轻松 地 改变 尺寸 和 重新 定位 的 的 能 


























注意 DDO000000“00”"00000000000000000000000000 
UUUUOUOOU0OUODOOUOUOO0OUOU0O00O0U0O0O00U0O000U00OD000D0 x 
U0 








与 选项 卡 部 件 和 手 风 雁 部 件 不 同 , 对 话 框 并 不 严格 限制 应 用 的 元 系 儿 乎 任何 元 素 都 可 以 成 为 
它 的 主体 ， 但 通常 将 包含 内 容 的 <aiv> 元 素 作为 对 话 框 的 主体 。 

为 了 创建 对 话 框 ,首先 把 将 要 成 为 对 话 框 主体 的 内 容 选 择 到 一 个 包装 集中 , 然后 对 此 包装 集 
应 用 dialog () 方 法 。dialog () 方 法 的 语法 如 下 所 示 。 








Q 这 里 指 的 应 该 是 正 下 window.showModalDialog () 和 window.showModelessDialog () 两 个 方法 。 
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: dialog 


dialog (options) 

dialog('disable') 

dialog('enable') 

dialog('destroy') 

dialog('option', optionName, value) 

dialog('open') 

dialog('close') 

dialog('isOpen') 

dialog('moveToTop') 

dialog('widget') 

通过 将 包装 集中 的 元 素 从 文档 流 中 删除 ， 并 将 它们 包含 在 “边框 ”中 ， 从 而 将 这 些 元 素 转 变 为 
对 话 框 .注意 ,创建 对 话 框 的 同时 会 自动 打开 这 个 对 话 框 ,除非 将 autoopen 选项 设置 为 false 
来 茶 用 自动 打开 功能 


options ( 对象 ) 一 个 散 列 对 象 ， 由 要 应 用 到 对 话 框 的 选项 组 成 (参见 表 11-16 ) 

‘disable' (字符 串 ) 禁用 对 话 框 

enable， ( 字符 串 ) 重新 启用 被 禁用 的 对 话 框 

"Gestroy" (字符 串 ) 销毁 对 话 框 。 一 旦 对 话 框 被 销毁 ， 就 不 能 再 次 打开 它 了 。 注 意 ， 
销毁 对 话 框 不 会 使 包含 的 元 素 恢 复 到 正常 的 文档 流 中 

:option ， (字符 串 ) 基于 剩余 的 参数 , 设置 包装 集中 所 有 元 素 的 选项 值 , 或 者 获取 包 


装 集 中 第 一 个 元 素 ( 必须 是 对 话 框 元 素 ) 的 选项 值 。 如 果 指 定 这 个 字符 囊 
作为 第 一 个 参数 ， 则 至 少 需 要 提供 optionName 参数 

optionName (字符 串 ) 要 设置 或 返回 的 选项 名 称 的 值 ( 参 见 表 11-16 )。 如 果 提 供 value 
参数 ， 则 这 个 值 就 成 为 选项 的 值 。 如 果 没 有 提供 value 参数 ， 则 返回 已 命 


名 选项 的 值 
se (字符 事 ) 打开 一 个 关闭 的 对 话 框 
ClLose' (字符 串 ) 关闭 一 个 打开 的 对 话 框 。 可 以 使 用 open 方法 在 任何 时 候 打 开 对 
话 框 
'1sOpen (字符 串 ) 如 果 对 话 框 处 于 打开 状态 ， 则 返回 true; 否则 返回 false 
'moveToTop' ( 字符 串 ) 如 果 存 在 多 个 对 话 框 ， 则 将 此 对 话 框 移 到 对 话 框 堆栈 的 顶层 
widget， (字符 串 ) 返回 对 话 框 部 件 元 素 ， 即 带 有 ui-dialog 类 名 的 元 素 


返回 值 
包装 集 ， 除 了 返回 如 上 所 述 的 值 的 情况 
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理解 创建 对 话 框 和 打开 对 话 框 的 区 别 是 很 重要 的 。 在 创建 了 一 个 对 话 框 之 后 ,就 无 需 在 关闭 
后 需要 再 次 打开 的 时 候 再 次 创建 对 话 框 。 除 非 被 禁用 了 ,否则 对 话 框 在 创建 后 会 被 自动 打开 。 重 
新 打开 已 经 被 关闭 的 对 话 框 , 要 调用 aialog('open ' ) 方 法 , 而 不 是 再 次 市 选项 地 调用 dialog () 
力 \ 
< 和 往常 一 样 ， 对 话 框 实验 室 可 以 在 文件 chapterll/dialogslab.dialogs.html 中 找到 ， 如 图 11-15 
全 所 示 。 你 可 以 尝试 dialog () 方 法 的 各 个 选项 。 





8 [jQuery in Action, 2nd Editio! %/ [jQuery Ui Dialogs Lab x Ws 


€ 3 CH http://localhost/jqia2/chapterl1/dialogs/lab.dialogs.html 





jQuery UI Dialogs Lab 


Dialog options 
autoOpen: 和 unspecified Dtrue Ofalse 
buttons: DOK DYes DNo DWhatever 
closeOnEscape: (unspecified Otrue 
closeText: | 


draggable: Bunsped ‘a Lorem ipsum dolor sit amet, consectetur 
四 un fed Otnue adipiscing elit. Nam gravida nisi sit amet 


height: @ unspecified Oauto dolor elementum feugiat. Phasellus 
hide: B unspecified DO slidt pharetra quam quis nisi fermentum non 
minHeight: | maxHeight: dictum diam tristique， Pellentesque rmetus 
odal: 各 | tm felis, lacinia ac interdum nec, elementum 
moda': unspedfied true ar nisl, Fusce malesuada imperdiet neque, 
position: unspecified O cen id iaculis orcl sodales cursus. [heft,top] 


resizable: @ unspecified Dtrue Nulla ut risus nec quam pretium semper. 
show: unspecfied O slidt Proin congue dictum sapien, at tincidunt 
Hier sapien viverra non. Donec luctus eros vel 
oo— urna ullamcorper gravida. Suspendisse 
eT (in pixels) vitae quam et lorem ornare adipiscing. 
Pellentesque habitant morbi tristique 


L_appy | LL_pisable | [Enabl Senectus et netus et malesuada fames ac 


Executed commands, rh 
可 人 .bestSubject).dialog(t }); 


Test subject dialog 


At 11:47:01.428 = dialoglocus 
At 11:47:01.431 = dialogopen 





图 11-1$ jQuery UI 对 话 框 实验 室 可 以 尝试 可 用 于 jQuery UI 对话 框 的 所 有 选项 


你 可 以 一 边 通 读 表 11-16 中 的 选项 列表 ， 一 边 在 实验 室 进 行 练习 。 
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表 11-16 ”jQuery UI 对 话 框 部 件 的 选项 





































































































、 是 i 是 否 在 实验 
选 项 描 述 室 页 面 中 
autoOpen (布尔 ) 除非 设置 为 false， 否 则 对 话 框 会 在 创建 的 时 候 打 开 。 当 设置 为 Vv 
false 时 ， 可 以 通过 调用 dialog ('open') 来 打开 对 话 框 
beforeClose ( 函数 ) 指定 在 对 话 框 上 创建 的 函数 ， 用 来 作为 dialogbeforeclose 事 件 V 
的 事件 处 理 咒 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 需 的 信息 ) 请 参见 表 11-17 
buttons ( 对 象 ) 指定 放置 在 对 话 框 底部 的 任何 按钮 。 对 象 中 的 每 个 属性 作为 按钮 的 vV 
标题 ， 属 性 的 值 必须 是 一 个 单 击 按钮 时 调用 的 回调 函数 
调用 此 处理 紫 时 会 将 函数 上 下 文 设置 为 对 话 框 元 素 , 同时 问 此 处 理 融 传人 事 
件 实例 参数 ( 按钮 组 被 设置 为 事件 实例 的 target 属 性 ) 
如 果 省 略 ， 则 不 会 为 对 话 框 创建 任何 按钮 
冰 数 上 下 文 适合 与 dialog () 方 法 一 起 使 用 。 例 如 ， 在 cancel 按 钮 的 回调 
困 数 中 ， 下 面 的 代码 用 来 关闭 对 话 框 : 
s(this) .dialog('close'); 
close ( 函数 ) 指定 在 对 话 框 上 创建 的 函数 ， 用 来 作为 4ialogclose 事 件 的 事件 处 Vv 
理 需 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 需 的 信息 ) 请 参见 表 11-17 
closeOnRsecape (布尔 ) 除非 设置 为 false, 否则 在 对 话 框 获取 焦点 的 时 候 用 户 按 下 Escape v 
键 会 关闭 对 话 框 
closeText (字符 串 ) 用 来 蔡 换 关闭 按钮 默认 值 Cl1ose 的 文本 值 v 
dialogClases (字符 串 ) 除了 jQuery UI 癌 对 话 框 元 素 添 加 的 类 名 外 ， 还 可 以 使 用 此 选项 来 
指定 添加 到 对 话 框 元 素 的 以 空格 分 隔 的 CSS 类 名 。 如 果 省 略 ， 则 不 会 添加 额外 
的 类 名 
drag ( 函数 ) 指定 在 对 话 框 上 创建 的 函数 ， 用 来 作为 4ialog drag 事 件 的 事件 处 V 
理 需 。 有 关 这 个 事件 的 更 多 细节 【传人 处 理 需 的 信息 ) 请 参见 表 11-17 
dragStart (函数 ) 指定 在 对 话 框 上 创建 的 函数 ， 用 来 作为 dialog dragstart 事 件 的 
事件 处 理 硕 。 有 关 这 个 事件 的 更 多 细 市 ( 传 入 处理 磊 的 信息 ) 请 参见 表 11-17 
dragstop ( 函数 ) 指定 在 对 话 框 上 创建 的 函数 ， 用 来 作为 dialog dragStop 事 件 的 
事件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 需 的 信息 ) 请 参见 表 11-17 
draggable (布尔 ) 除非 设置 为 false， 否 则 可 以 通过 单 击 和 拖 动 对 话 框 的 标题 栏 来 移 V 
动 对 话 框 
focus ( 浮 数 ) 指定 在 对 话 框 上 创建 的 函数 ， 用 来 作为 dialog dialogfocus 事 
件 的 事件 人 处理 怖 。 有 关 这 个 事件 的 更 多 细 市 (传人 处 理 右 的 信息 ) 请 参见 表 
11-17 
height (数值 | 字符 串 ) 以 像 取 为 单位 的 对 话 框 的 高 度 ,或 字符 串 "auto"( 默认 值 )， v 
它 可 以 根据 对 话 框 自 导 的 内 容 来 决定 其 高 度 
hide (字符 串 | 对 象 ) 关闭 对 话 框 时 使 用 的 特效 ( 参见 第 9 章 ) 。 默 认为 nul11 v 
maxHeight (数字 ) 可 以 调整 对 话 框 尺寸 的 最 大 高 度 ( 以 像素 为 单位 ) V 
maxWidth (数字 ) 可 以 调整 对 话 框 尺寸 的 最 大 宽度 ( 以 像素 为 单位 ) Vv 
minHeight (数字 ) 可 以 调整 对 话 框 尺寸 的 最 小 高 度 ( 以 像素 为 单位 ， 上 默认 为 150) v 





图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 


374 第 11 章 jQueryUI 部 件 : 超越 HTML 控件 


选 项 


minWidth 


modal 


open 


position 


resize 


resizable 


resizeStart 


resizeStop 


show 


stack 


title 


width 


zZzIndex 


摘 述 








(数字 ) 可 以 调整 对 话 框 太 才 的 最 小 宽度 〈 以 像素 为 单位 ， 积 认为 150 ) 


(布尔 ) 如 果 为 true， 则 会 在 对 话 框 的 后 面 创建 一 个 半 透 明 的 “ 幕 帘 ”, 来 
蓄 住 窗 体 内 容 的 其 余部 分 ， 从 而 阻止 用 户 交 互 行为 


如 有 果 省 略 ， 则 对 话 框 是 非 模 式 的 


( 函数 ) 指定 在 对 话 框 上 创建 的 函数 ， 用 来 作为 aialogopen 事 件 的 事件 处 
理 艇 。 有 关 这 个 事件 的 更 多 细节 《传人 处 理 带 的 信息 ) 请 参见 表 11-17 


(字符 串 | 数组 ) 指定 对 话 框 的 初始 位 置 。 可 以 是 预定 义 位 置 center (默认 
值 ) 、left、right、top 或 bottom 的 其 中 之 一 


也 可 以 是 一 个 带 有 left 和 top 值 (以 像素 为 单位 ) 的 二 维 数 组 [left， 
top] ， 或 者 文本 位 置 例如 ['left',，'top'] 


(函数 ) 指定 在 对 话 框 上 创建 的 函数 ， 用 来 作为 dialog resize 事 件 的 事 
件 处 理 需 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 需 的 信息 ) 请 参见 表 11-17 


(布尔 ) 除非 指定 为 fEalse， 和 否则 对 话 框 可 以 在 各 个 方向 上 调整 矿 才 


( 也 数 ) 指定 在 对 话 框 上 创建 的 函数 ， 用 来 作为 dqialogresizeStart 事 件 
的 事件 处 理 器 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 器 的 信息 ) 请 参见 表 11-17 


( 也 数 ) 指定 在 对 话 框 上 创建 的 函数 , 用 来 作为 aialogresizeStop 事 件 的 
事件 处 理 吉 。 有 关 这 个 事件 的 更 多 细节 (传人 处 理 需 的 信息 ) 请 参见 表 11-17 


(学 符 串 ) 用 来 打开 对 话 框 的 特效 。 默 认 情 况 下 ， 不 使 用 任何 特效 


(布尔 ) 除非 指定 为 false， 否 则 对 话 框 会 在 获取 焦点 的 时 候 移动 到 任何 其 
他 对 话 框 的 上 面 


(学 符 串 ) 指定 显示 在 对 话 框 边框 的 标题 栏 中 的 文本 。 软 认 情 况 下 ， 将 对 话 
框 元 素 的 tit1le 特 性 作为 标题 


(数字 ) 以 像素 为 单位 的 对 话 框 的 宽度 。 如 果 省 略 ， 则 使 用 默认 值 300 
(数字 ) 用 来 覆盖 对 话 框 的 初始 z-index (默认 为 1000 ) 的 值 



























































( 续 ) 


是 否 在 实验 
室 页 面 中 
Vv 


Vv 


使 用 对 话 框 实验 室 可 以 很 容易 地 看 到 大 部 分 选项 的 操作 , 但 是 确保 你 了 解 模式 对 话 框 和 非 模 


式 对 话 框 的 区 别 。 


在 实验 室 的 控制 台 , 各 种 事件 ( 随 着 对 话 框 交互 的 进行 ) 按 照 它 们 被 触发 的 顺序 来 依次 显示 。 
下 面 来 考察 可 能 的 事件 。 


11.8.2 ”对 话 框 事件 
当 用 户 操 作 我们 创建 的 对 话 框 时 ， 会 触发 各 种 自 定义 的 事件 ， 以 便于 我 们 向 页 面 中 添加 


钩子 《hook )。 这 让 我 们 有 机 会 在 对 话 框 生命 周期 的 适当 时 间 执 行 操作 ， 其 至 


操作 。 


= 
呆 乡 


啊 对 话 框 的 
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在 对 话 框 交 互 过 程 中 触发 的 事件 显示 在 表 11-17 中 。 向 每 个 事件 的 处 理 器 传递 事件 实例 和 自 
定义 对 象 。 限 数 上 下 文 (也 就 是 事件 日 标 ) 被 设 置 为 对 话 框 元 又。 

传人 处 理 带 的 目 定 义 对 象 取 决 于 事件 的 类 型 。 

口 对 于 dialogdrag、dialogdragStart 和 dialogdragStop 事件 ， 目 定义 对 象 包 含 属性 
offset 和 position, 它们 又 包含 属性 left 和 top, 分 别 识别 对 话 框 相对 于 页 面 或 者 它 
的 俩 移 父 元 素 的 位 置 。 

口 对 于 dialogresize、 dialogresizeStart 和 dialogresizeStop 事件 , 目 定 义 对 象 包 
含 属 性 originalPosition、originalSize、position 和 size。position 属性 是 包 
含 期 望 的 left 和 top 属性 的 对 象 ， 而 size 属性 包含 height 和 widtn 属性 。 

口 对 于 所 有 其 他 的 事件 类 型 ， 目 定义 对 象 没 有 属性 。 














表 11-17 jQuery UI 对 话 框 的 事件 























事 件 选 项 描 述 
dialogbeforeclose beforeClose 在 对 话 框 将 要 关闭 时 触发 
返回 false 来 阻止 关闭 对 话 框 一 一 对 于 包含 错误 验证 表单 的 
对 话 框 非常 方便 
dialogclose close 关闭 对 话 框 后 触发 
drag drag 当 处 于 拖 动 操作 中 移动 对 话 框 时 ， 重 复 地 触发 
agogeaetk dragStart 当 通 过 拖 动 对 话 框 的 标题 栏 来 开始 重新 定位 对 话 框 时 触发 
dragStop dragStop 当 拖 动 操作 终止 时 触发 
dialogfocus focus 当 对 话 框 获取 焦点 时 触发 
dialogopen open 当 打 开 对 话 框 时 触发 
resize resize 当 改 变 对 话 框 尺寸 时 重复 触发 
resizeStart resizeStart 当 开 始 改 变 对 话 框 尺寸 时 触发 
resizeStop resizeStop 当 结 束 改变 对 话 框 尺寸 时 触发 








在 介绍 这 些 事件 的 一 些 巧 妙用 法 之 前 ， 移 来 考察 一 下 jQuery 放置 在 (参与 对 话 框 创建 的 ) 
元 系 上 的 类 名 。 


11.8.3 ”对 话 框 的 类 名 
和 其 他 部 件 一 样 ，jQuery UI 为 即将 进入 对 话 框 部 件 结构 中 的 元 素 添 加 了 类 名 ， 来 帮助 我 们 
查找 这 些 元 素 ， 以 及 通过 CSS 来 为 它们 添加 样式 。 


对 于 对 话 框 部 件 ， 添 加 的 类 名 如 下 所 示 。 
添加 到 <qiv> 元 素 的 类 名 ， 这 个 元 素 用 来 包含 整个 部 件 ， 包 括 内 容 和 





Dui-dialog 
Ee 
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UD ui-dialog-titlebar 添加 到 <dqiv> 元 杂 的 类 名 , 这 个 元 系 用 来 容纳 标题 和 关闭 








图 标 。 
口 ui-dqialog-title 一 一 添加 到 <span> 元 素 的 类 名 ， 这 个 元 素 被 包含 在 标题 栏 中 ， 用 来 包 
于 标 题 文本 。 





ui-dialog-titlebar-close 添加 到 <a> 标 签 元 系 的 类 名 , 这 个 元 素 用 来 包含 标题 栏 
中 的 “x”( 关闭 ) 图 标 。 
UD ui-dialog-content 
的 类 名 。 
重要 的 是 要 记 住 ,传人 事件 处 理 需 的 元 素 是 对 话 框 内 容 元 素 (使 用 ui-dialog-content 来 
标记 的 元 素 )， 而 不 是 生成 的 用 来 保持 部 件 的 外 部 容 盖 。 
下 面 来 看 看 几 种 指定 内 容 的 方式 ， 且 该 内 容 尚 不 存在 于 页 面 的 对 话 框 中 。 


11.8.4 ”对 话 框 使 用 技巧 


一 般 说 来 ， 对 话 框 是 通过 包含 在 页 面 标签 中 的 <aQiv> 元 素来 创建 的 。jQuery UI 获取 它 的 内 容 ， 
将 其 从 DOM 中 删除 , 创建 作为 对 话 框 外 框 的 元 素 , 并 设置 原始 的 那个 元 素 作为 对 话 框 外 框 的 内 容 。 
但 是 如 果 我 们 想 在 dialogopen 事件 处 理 锅 中 通过 Ajax 动态 地 加 载 内 容 ， 该 怎么 办 呢 ? 实 
际 上 使 用 下 面 代码 能 够 非常 简单 地 完成 这 个 操作 : 
S$S('<div>') .dialogl(t 
open: function(){ S$(this).load('/url/to/resource'),; }, 








添加 到 对 话 框 内 容 元 素 ( 调用 aialog () 时 所 操作 的 包 庄 元 素 ) 


























title: 'A dynamically loaded dialog,' 
}); 


在 这 段 代码 中 ， 我 们 动态 地 创建 了 一 个 新 的 <aiv> 元 素 ， 然 后 把 它 转变 为 对 话 框 ， 就 好 像 它 
是 一 个 已 经 存在 的 元 素 似 的 。 选 项 指定 了 对 话 框 的 标题 ， 以 及 一 个 为 dialogopen 事件 准备 的 回 
调 函 数 ,在 回调 也 数 中 使 用 1oad() 方 法 来 加 载 内 容 元 素 ( 对 话 框 的 内 容 元 素 被 设置 为 子 数 上 下 文 )。 

目前 看 到 的 场景 中 ,不 管 是 内 容 已 经 存在 于 页 面 中 的 情况 , 还 是 通过 Ajax 加 载 内 容 的 情况 ， 
内 容 都 是 存在 于 当前 页 面 的 DOM 元素 中 。 如 有 果 我 们 希望 对 话 框 的 主体 内 容 存 在 于 自己 的 页 面 中 ， 
该 怎么 办 ? 

如 采 对 话 框 内 容 和 页 面 内 容 需 要 以 任何 方式 进行 交互 ,那么 使 对 话 框 内 容 和 它 的 父 元 素 位 于 
相同 的 DOM 结构 中 很 方便 ， 但 是 我 们 也 可 能 而 望 对 话 框 内 容 是 一 个 完整 独立 的 页 面 。 最 稍 见 的 
原因 可 能 是 因为 对 话 框 内 容 需 要 自己 的 样式 和 脚本 , 而 我 们 不 希望 在 准备 使 用 对 话 框 的 每 一 个 父 
页 面包 含 这 些 资 源 。 

怎么 来 完成 这 个 任务 呢 ? HTML 是 否 文 持 使 用 单独 的 页 面 作为 另 一 个 页 面 的 一 部 分 呢 ? 当 
钛 了 了.……… <iframe> 元 巡 | 


























考虑 这 段 代码 : 
Ss('<iframe src="content.html" id="testDialog">') .dialog(t 
title: 'iframe dialog', 


buttons: { 
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Dismiss: function(){ S$(this) .dialog('close'),; } 
} 
}); 


这 里 我 们 动态 地 创建 了 一 个 <iframe> 元 素 , 指定 它 的 源 和 ia 特性 , 然后 把 它 转变 为 对 话 框 。 
传人 dialog() 方 法 的 选项 指定 了 对 话 框 标 题 和 用 来 关闭 对 话 框 的 Dismiss 按钮 。 是 不 是 非常 棒 ? 

现在 沾沾自喜 还 为 时 过 早 ，, 显示 的 对 话 框 出 现 一 个 问题 。<iframe> 的 深 动 条 被 对 话 框 的 边 
框 截 控 了 一 部 分 ， 如 图 11-16 左 半 部 分 所 示 。 我 们 想 要 的 对 话 框 当然 是 图 右 半 部 分 所 示 的 样子 。 

因为 <iframe> 看 起 来 有 点 宽 ， 我 们 可 以 符 试 使 用 一 个 CSS 规则 使 其 变 罕 ， 但 是 令 我 们 失望 
的 是 这 不 起 作用 。 稍 微 深 入 探索 后 发 现 daialog () 方 法 将 一 个 CSS 规则 widath:auto 放置 到 了 
<if rame> 元 床上 ， 从 而 使 所 有 上 直接 操作 <i frame> 样 式 的 答 试 都 以 失败 告终 。 和 














iframe dialog x iframe dialog x 
和 
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Nam gravida nisi sit amet adipiscing elit. Nam gravida nisi sit 
dolor elementum feugiat. Phasellus amet dolor elementum feugiat. Phasellus 
pharetra quam quis nisi fermentum non pharetra quam quis nisi fermentum non 
dictum diam tristique. Pellentesque metus dictum diam tristique. Pellentesque 
felis, lacinia ac interdum nec, elementum metus felis, lacinia ac interdum nec， 
at nisl. Fusce malesuada imperdiet neque, elementum at nisl. Fusce malesuada 
3 3 一 men 一 az a mmeeam Soom esi a i i nl 
Dismiss Dismiss 








图 11-16 我 们 的 喜悦 之 情 被 截断 的 滚动 条 所 破坏 ， 如 图 左 侧 所 示 


如 何 修正 这 个 问 





题 使 其 看 起 来 如 图 右 侧 所 示 呢 
不 过 这 也 没关系 。 我 们 可 以 使 用 更 高 级 别 的 样式 规则 。 下 面 为 sialog () 调 用 添加 如 下 选项 ; 


open: function()t 
S(this).css('width','95%'); 
} 


这 会 在 对 话 框 打开 的 时 候 窗 盖 位 于 <iframe> 上 的 样式 。 

请 记 住 ,通过 这 种 方式 创建 的 对 话 框 也 是 有 缺点 的 。 例 如 , 任何 在 父 页 面 中 创建 的 按钮 和 在 
<iframe> 中 加 载 的 页 面 的 交互 将 需要 跨 两 个 窗 体 进行 交流 。 

这 个 示例 的 源 文件 可 以 在 chapter11/dialogs/iframe.dialog.html 中 找到 。 











11.9 小结 


哇 。 这 是 很 长 的 一 草 ， 但 是 我 们 也 从 中 学 到 了 很 多 知识 。 


Q) 这 里 涉及 CSS 的 优先 级 规则 ， 一 般 说 来 内 联 样式 的 优先 级 最 高 。 详 细 信 息 请 参考 : http://www.w3.org/TR/CSS21/ 


cascade.html#specificity。 
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我 们 看 到 jQuery UI 是 如 何在 它 提供 的 交互 部 件 和 特效 (前面 几 章 曾 经 考察 过 ) 的 基础 之 上 
创建 的 ， 以 便 人 允许 我 们 创建 各 种 部 件 ， 为 用 户 提供 直观 和 易于 使 用 的 用 户 界面 。 

我 们 学 习 了 扩展 传统 HTML 外 观 和 风格 的 按钮 部 件 ， 使 其 在 jQuery UI 的 沙 盒 中 很 好 地 
工作 。 

允许 用 户 输 入 数字 和 日 期 数据 类 型 ( 传统 的 实现 方式 充满 了 问题 ) 的 部 件 分 别 由 滑动 条 和 日 
期 选择 需 来 提供 。 目 动 完成 部 件 完 善 了 数据 输入 部 件 ， 人 允许 用 户 快速 过 滤 大 的 数据 集 。 

进度 条 部 件 赋 予 了 我 们 以 图 形 和 易于 理解 的 方式 辐 用 户 展示 操作 完成 状态 的 百分比 。 

最 后 ， 我 们 看 到 了 3 个 以 不 同方 式 组 织 内 容 的 部 件 : 选项 卡 、 手 风 容 和 对 话 框 。 

将 这 些 部 件 添加 到 工具 箱 中 ， 我 们 就 可 以 利用 它们 组 织 各 种 界面 。 不 过 这 只 是 由 jQuery UI 
提供 的 官方 部 件 集 合 。 我 们 已 经 看 到 ，jQuery 可 以 很 方便 地 进行 扩展 ， jQuery 社区 也 一 直 没 有 
内 着。 即使 没有 成 二 上 万 ， 也 至 少 有 成 百 上 干 个 其 他 的 插件 存在 ， 等 待 着 我 们 去 探索 。 可 以 从 
http://plugins.jquery.com/ 开 始 你 的 探索 。 

















11.10 ”结束 语 


真 不 容易 ! 尽管 我 们 在 本 书 中 介绍 了 jQuery 和 jQuery UI 全 部 的 API， 但 是 我 们 无 法 逐一 展 
示 所 有 API 在 页 面 上 的 使 用 方式 。 我 们 介绍 的 示例 都 是 经 过 特别 挑选 的 , 目的 是 为 了 帮助 你 发 现 
如 何 使 用 jQuery 来 解决 日 常 在 Web 应 用 页 面 开 发 中 遇 到 的 问题 。 

jQuery 是 一 个 活力 四 射 的 项 目 。 令 人 吃惊 的 活跃 ! 唤 ， 对 于 本 书 作 者 来 说 ， 如 何在 编写 本 书 
的 过 程 中 跟 上 jQuery 库 快 速 的 开发 步伐 可 是 一 件 吉 差事 。 核 心 库 在 不 断 演变 成 一 个 更 加 有 用 的 
资源 ， 几 乎 每 天 都 会 出 现 很 多 新 的 插件 。jQuery UI 的 开发 步伐 也 在 不 遗 余力 地 向 前 推进 。 

我 们 强烈 希望 你 能 够 持续 关注 jQuery 社区 的 发 展 ， 并 衷心 希望 本 书 能 人 够 融 给 你 帮助 ， 以 更 
短 的 时 间 和 更 少 的 代码 ( 比 你 曾经 认为 的 还 要 少 ) 编写 更 好 的 Web 应 用 程序 。 

我 们 希望 你 能 健康 快乐 ， 希 望 你 能 轻松 地 解决 挥 所 有 的 bug! 
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附录 内 容 

口 哪些 JavaScript 概念 对 于 有 效 地 使 用 jQuery 来 说 很 重要 
D JavaScript object 的 基础 知识 

口 为 什么 次 函数 是 一 等 对 象 

口 确定 (以 及 控制 ) this 的 含义 

OD 闭 包 是 什么 








jQuery 为 Web 应 用 市 来 的 最 大 好 处 之 一 承 是 无 需 目 己 编写 一 大 堆 脚 本 代码 就 能 实现 大 量 局 
用 脚本 的 行为 。jQuery 处 理 了 具体 的 细节 ， 所 以 我 们 只 须 专 注 于 让 Web 应 用 做 它们 该 做 的 事情 ! 

在 本 书 的 最 初 儿 章 中 ， 只 需要 最 基本 的 JavaScript 技巧 就 能 理解 和 编写 那些 示例 。 在 探讨 高 
级 主题 ( 比如 事件 处 理 、 动 画 、 以 及 Ajax ) 的 各 草 中 ， 则 必须 理解 几 个 基本 的 JavaScript 概念 ， 
以 便 能 高 效 地 使 用 jQuery 库 。 你 可 能 发 现 , 在 JavaScript 中 有 很 多 原 以 为 理所当然 (或 育 目 接受 ) 
的 事情 开始 变 得 更 有 意义 了 。 

我 们 不 打算 在 这 里 探讨 所 有 的 JavaScript 概念 一 一 这 不 是 本 书 的 意图 。 本 书 旨 在 帮助 谈 者 在 
尽 可 能 短 的 时 间 内 快速 有 将 地 运用 jQuery。 为 此 ， 附 录 将 会 专注 于 基本 概念 ， 以 便 在 Web 应 用 
程序 中 最 有 歼 地 使 用 jQuery。 

这 些 概 念 中 最 重要 的 就 是 : 困 数 是 JavaScript 中 的 -等 对 象 ，J avaScript 定义 和 处理 函数 方式 
也 体现 出 这 一 点 。 这 意味 着 什么 呢 ?” 为 了 理解 限 数 是 对 象 ， 先 抛 开 一 等 对 篆 的 说 法 ,我 们 首先 必 
须 确保 要 能 理解 JavaScript 对 象 的 全 部 售 义 。 下 面 就 来 深入 探讨 吧 。 


A.1 JavaScript 对 象 的 基本 原理 


大 多 数 面 回 对 象 ( 简称 OO ) 语言 都 定义 了 某 种 基本 的 object 对 象 类 型 ， 其 他 所 有 的 对 象 
都 源 于 这 个 对 象 类 型 。 在 JavaScript 中 ,基本 的 object 对 象 确实 是 作为 所 有 其 他 对 象 的 基础 , 但 
是 这 种 比较 也 仅 此 而 已 。 从 基本 层面 上 看 ，JavaScript 的 object 对 象 与 其 他 大 部 分 的 OO 语言 
所 定义 的 基本 对 象 灾 无 相通 之 处 。 

初 看 起 来 ，JavaScript 的 object 对 象 可 能 是 平淡 无 奇 ， 甚 至 是 令 人 感到 乏味 的 。 对 象 一 旦 被 创 
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建 后 , 它 不 保存 任何 数据 并 且 几 乎 没有 什么 语义 ,但 是 这 些 有 限 的 语义 的 确 又 给 予 了 它 很 大 的 潜力 。 
下 面 就 来 一 探究 范 吧 。 


A.1.1 对 象 从 何 而 来 


新 的 对 象 由 new 操作 符 和 与 其 相配 的 object 构造 带 来 产生 。 创建 一 个 对 和 象 非常 简单 ， 如 下 
所 不: 

Var shinyAndNew = new Object(); 

它 还 可 以 更 简单 (很 快 束 会 看 到 )， 不 过 目前 这 就 可 以 了 。 

但 这 个 新 对 象 能 做 些 什么 呢 ? 其 中 似乎 什么 也 没有 , 没有 信息 ,没有 复 洒 的 说 义 , 什么 也 没 
有 。 这 新 出 炉 的 内 腕 对 象 一 点 也 不 吸引 人 ， 下 到 我 们 开始 同 其 添加 东西 一 一 称 为 属性 的 东西 。 


A.1.2 对象 的 属性 


就 像 服 务 硕 端 对 象 那 样 ，JavaScript 对 和 象 也 可 以 包含 数据 和 方法 ( 响 …… 有 点 像 ， 不 过 对 我 
们 来 说 这 些 内 容 有 点 超前 了 )。 不 同 于 那些 服务 硕 问 的 对 象 ， 这 些 元 素 不 是 为 对 象 预 移 声 明 的 ， 
我 们 可 以 在 需要 的 时 候 动 态 地 创建 它们 。 

来 看 看 下 面 的 代码 片段 : 

Var ride = new Object().; 

ride.make = 'Yamaha'; 

ride.model = 'V-Star Silverado 1100 ' ; 

ride.year = 2005; 

ride.purchased = new Date(2005,3,12); 


在 这 里 我 们 创建 了 一 个 新 的 object 实例 ， 并 且 把 它 赋值 给 riqe 变量 。 然 后 用 一 些 不 同类 
型 的 属性 来 填充 这 个 变量 : 两 个 字符 串 、 一 个 数字 以 及 一 个 Date 类 型 的 实例 。 

不 需要 在 赋值 前 声明 这 些 属性 , 这 些 属性 只 不 过 是 通过 赋值 而 产生 的 。 这 是 给 予 我 们 高 度 灵 
活性 的 强大 “ 符 死 ”。 不 过 ， 在 你 得 意 忘 形 之 前 ， 别 忘 了 灵活 性 总 是 要 付出 代价 的 ! 

例如 ， 假 设 在 局 用 脚本 的 HTML 页 面 的 后 续 代 码 中 ， 我 们 想 要 改变 购买 日 期 : 

ride.purchased = new Date(2005,2,1); 

没 问题 …… 除 非 我 们 不 小 心 打 错字 了 ， 比 如 

ride.purchased = new Date(2005,2,1); 

没有 编译 硕 会 警告 我 们 犯 了 个 错误 。 我 们 高 高 兴 兴 地 创建 了 名 为 purchased 的 新 属性 ， 可 
随后 我 们 就 会 很 纳 问 ， 在 引用 拼写 正确 的 purchased 属性 时 为 什么 新 的 日 期 没有 生效 呢 ? 

能 力 越 大 ， 责 任 越 重 〈 似 曾 听 到 过 ? )， 因 此 打字 要 仔细 |! 























注意 UUOUOOUODOOODOO0ODODyJavaScriptUUODOODOOO0OD FirefoxD FirebusUOOUODOO” 0 
UD UUOO0O00000UU0U00000000 JavascriptU UUUUU JavascrptDU DUO 
UDDOUDUUDUUUUUUUD 


图 灵 社 区 会 员 Jeremy7Towne(tyj1747552250@outlook.com) 专 享 尊重 版 权 


附录 JavaScript 必 知 必 会 381 


从 这 个 例子 中 ,我 们 知道 了 JavaScript object 的 实例 (从 现在 开始 简称 为 对 象 ) 就 是 一 组 
属性 集 , 每 个 属性 都 由 名 称 和 值 构 成 。 属性 的 名 称 是 字符 串 , 属性 值 可 以 是 任何 JavaScript 对 象 ， 
可 以 是 Numper、String、Date、Array、 基 本 的 object，, 也 可 以 是 任何 其 他 的 JavaScript 对 象 
类 型 ( 也 包括 函数 ,我们 很 快 就 会 看 到 )。 

这 意味 着 object 实例 的 主要 就 是 用 作为 容 右 ,包含 其 他 对 象 的 已 命名 集合 。 这 可 能 会 让 你 
想起 其 他 语言 中 的 概念 : 例如 Java 中 的 映射 ， 或 其 他 语言 中 的 字典 或 散 列 。 

属性 不 局 限于 类 似 于 string 或 Number 的 类 型 ,一 个 对 和 象 属性 可 以 是 为 一 个 object 实例 ， 
这 个 实例 又 包含 其 日 己 的 属性 集 ， 而 属性 集中 也 可 以 包含 拥有 属性 的 对 象 ， 以 此 类 推 。 只 要 对 我 
们 塑造 的 数据 模型 有 意义 ， 就 可 以 能 套 至 任何 层次 。 

假设 给 ride 实例 添加 一 个 新 的 属性 以 保存 车 辆 的 所 有 者 信息 。 这 个 属性 是 另 一 个 JavaScript 
对 象 ， 它 包含 了 一 些 属 性 ， 如 所 有 者 姓名 和 职 ， 


Var Owner = new Object () ; 











owner .name = 'Spike Spiegel'; 
owner.occupation = 'bounty hunter'; 
ride.owner = owner,; 


为 了 访问 向 套 的 属性 ， 我 们 编写 如 下 代码 : 

Var ownerName = ride.owner.name; 

可 利用 的 般 套 层次 是 没有 限制 的 (只 要 不 超出 常识 的 限度 )。 当 完成 此 对 象 后 〈 目前 为 止 )， 
对 象 的 层次 结构 如 图 A-1 所 示 。 













Object String 


Number 2005 


_Date 0 
Object 
name | 
CI 
occupation | String bounty hunter 














Se V-Star Silverado 1100 
















String Spike Spiegel 









图 A-1 对 象 的 层次 结构 显示 了 object 是 其 他 object 或 JavaScript 内 置 类 型 的 已 命 
名 引用 的 容 需 


注意 该 图 中 的 每 个 值 都 是 一 个 不 同 的 JavaScript 实例 。 


注意 D0O0000000000000000000000000000000000 
owner[[DDODODDODODOUOUDUUU0OUOOUOUUU0UU0UUUUUUUUU00 
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目前 为 止 ， 我 们 使 用 点 操作 符 ( 英文 的 句号 字符 ) 来 引用 对 象 的 属性 。 但 是 事实 证 明 ， 有 一 
个 更 加 通用 的 操作 符 ( 点 操作 符 的 同义词 ) 来 执行 属性 引用 。 

例如 ， 如 果 有 一 个 名 为 color .scheme 的 属性 , 那 会 怎么 样 呢 ? 你 有 没有 注意 到 名 称 中 间 
的 点 号 ? 它 会 破坏 整个 操作 ， 因 为 JavaScript 解释 需 会 试图 将 scheme 作为 color 的 航 套 属性 
来 查找 。 

“ 哦 ， 只 要 不 那样 做 就 行 !” 你 会 这 样 说 。 但 是 如 果 出 现 空格 符 呢 ”如果 出 现 可 能 会 被 误 认 为 
是 分 隔 符 而 不 是 名 称 一 部 分 的 其 他 字符 , 该 怎么 办 呢 ? 最 重要 的 是 , 如果 我 们 不 知道 属性 的 名 称 
是 什么 ， 只 知道 它 是 另 一 个 变量 的 值 或 某 个 表达 式 的 求 值 结果 ， 又 该 怎么 办 呢 ? 

在 所 有 的 这 些 情况 下 , 点 操作 符 都 是 不 合适 的 ,因此 必须 使 用 更 加 通用 的 表示 法 来 访问 属性 。 
通用 的 属性 引用 操作 符 的 格式 是 

object [propertyNameExpression] 

其 中 propertyNameExpression 是 JavaScript 表达 式 ， 其 求 值 的 结果 作为 要 引用 的 属性 名 
称 的 字符 串 。 例 如 ， 下 面 的 3 个 引用 都 是 等 价 的 : 


ride.make 









































ride['make'] 
ride[l'm'+'a'+'k'+'e'] 


也 等 价 于 下 面 这 个 引用 : 


Var D = 'make'; 
ridelp]; 


对 于 其 名 称 并 非 有 效 的 JavaScript 标 识 符 的 属性 来 说 ,使 用 通用 的 引用 操作 符 是 引用 这 种 属 
性 的 唯一 方法 ， 例 如 ， 

ridel"a property name that's rather odqdql!"] 

包含 了 对 于 JavaScript 标识 符 来 说 不 合法 的 字符 ， 或 者 属性 的 名 称 是 其 他 变量 的 值 。 

通过 new 操作 符 来 创建 新 的 实例 ， 并 且 利 用 独立 的 赋值 语句 来 为 每 个 属性 赋值 从 而 建立 对 
象 ， 是 一 件 票 琐 的 事情 。 在 下 一 他 中， 我 们 将 会 探讨 声明 对 象 及 其 属性 的 更 加 紧凑 和 多 读 的 表 
人 全 
A.1.3 对象 字 面值 

在 上 一 市 中 ,我 们 创建 了 一 个 对 摩托 车 属性 进行 建 模 的 对 象 ， 并 将 其 赋值 给 rige 变量 。 为 
了 完成 个 操作 ， 我 们 使 用 了 两 个 new 操作 符 、 一 个 名 为 owner 的 中 间 变 量 以 及 一 些 赋值 语句 。 
这 样 做 既 桔 燥 乏 味 ， 又 元 长 吻 钳 )， 并 且 难 以 在 快速 检查 代码 的 时 候 把 握 对 象 的 结构 。 

等 运 的 是 ， 我 们 可 以 使 用 更 紧凑 和 更 易于 阅读 的 表示 法 。 考 虑 如 下 语句 : 


var ride = f{ 






































make: 'Yamaha', 

model: 'V-Star Silverado 1100 ' ， 
year: 2005, 

Purchased: new Date(2005,3,12), 
owner: 1 
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name: 'Spike Spiegel', 
occupation: 'bounty hunter' 
} 
}; 


这 个 代码 片段 使 用 对 象 字 面值 来 创建 rige 对 象 ， 与 上 一 市 中 用 赋值 语句 创建 的 ride 对 象 
相 同 @ 

这 种 表示 法 被 称 为 JSON ( JavaScript Object Notation，JavaScript 对 象 表示 法 ”)， 大 多 数 页 面 
开发 者 对 JSON 的 偏爱 有 加 ， 不 喜欢 通过 多 个 赋值 语句 来 建立 对 和 象 的 方式 。JSON 的 结构 简单 : 
对 和 象 由 一 对 花 括号 表示 , 在 其 中 列 出 用 逗号 分 隐 的 多 个 属性 。 每 个 属性 通过 以 冒号 分 隐 的 名 称 和 
值 来 表示 。 











注意 D00D0DDDDJSONOO00000000000 JavascriptUOOOOOOOODOODO 
DDUDUUUUUU J SoONUUUUUUD patreDDDUDDUUUUUUUUUUD 
DDUDDODOUUDODOOUU0UUUUUUUUUUUUD IO $86e01U0UUU0U0U0UUUUD 
DUUUUDDate.getTime()0 U0UUUUUD 
DUUUDUUOUUDD JISONDODODOUUDOOOUUUUUUUUUUUUUUUUUUD 
D000“"000 http:/wwwjson.org DDO RFC 46270 http:/www.ietf.org/rfc/rfc4627 .txt[ 


UUDUUUUUD 


从 owner 属性 的 声明 可 见 ， 对 象 的 声明 可 以 诅 套 。 

顺便 说 一 下 ,也 可 以 在 JSON 中 通过 在 方 括号 内 放置 以 逗号 分 隅 的 元 素 列 表 来 表示 数组 ， 如 
下 所 未: 

WE 

和 我 们 在 本 节 的 示例 中 看 到 的 一 样 ， 对象 引用 通常 存储 在 变量 或 其 他 对 象 的 属性 中 。 下 面 就 
来 看 看 关于 后 者 的 特殊 案例 。 


A.1.4 作为 窗 体 属 性 的 对 象 


到 目前 为 止 ， 我 们 已 经 看 到 了 两 种 保存 JavaScript 对 象 的 方式 : 变量 和 属性 。 这 两 种 保存 引 
用 的 方式 使 用 不 同 的 表示 法 ， 如 下 面 的 代码 片段 所 示 : 


Var aVvariable = 


























'Before I teamed up with you, I led gquite a normal lJife.'，; 


someObject.aProperty = 
'You move that line as you see fit for yourself.'; 


GD 更 多 信息 ， 请 访问 http:/www.json.org/。 
@) 作为 数据 交换 格式 时 , JSON 中 属性 的 名 称 必 须 由 双 引 号 来 引用 , 这 和 作为 JavaScript 对 象 字 面值 的 属性 可 以 由 单 
引号 、 双 引号 ， 或 者 干脆 不 用 引号 〈 只 要 属性 名 称 不 包含 空格 等 特殊 字符 ) 来 引用 不 同 。 
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这 两 个 语句 分 别 把 (通过 字面 值 创 建 的 ) string 实例 赋值 给 第 一 个 语句 中 的 变量 及 第 二 个 
语句 中 的 对 象 属性 。( 如 有 果 能 人 够 找 出 这 两 个 上 雇 引文 的 出 处 ， 那 么 来 葵 就 归 你 了 ; 不 能 用 Google 
作弊 ! 本 章 的 前 面部 分 留 有 线索 ”。) 

但 是 这 两 个 语句 真 的 执行 不 同 的 操作 吗 ? 事实 证 明 不 是 的 ! 

如 果 在 顶层 ( 任何 内 部 的 函数 主体 之 外 ) 中 使 用 vaz 关键 词 时 ， 那 只 不 过 是 对 程序 员 友 好 
的 表示 法 ， 用 来 引用 预定 义 在 JavaScript window 对 象 上 的 属性 。 任 何在 顶层 作用 域 中 生成 的 引 
用 都 隐 式 地 创建 在 window 实例 中 。 这 意味 着 下 面 所 有 的 语句 ， 如 果 是 在 顶层 中 〈 也 就 是 在 图 数 
的 作用 域 之 外 ) 生成 的 ， 那 么 它们 都 是 等 价 的 : 


Var foo = bar; 



































和 

window.foo = bar; 
以 及 

foo = bar; 

不 管 使 用 的 是 哪 种 表示 法 ， 都 会 创建 一 个 名 为 foo 的 window 属性 (如果 foo 属性 尚未 存 
在 )， 并 且 将 par 赋值 给 foo。 还 要 注意 ， 因 为 par 是 非 限 定 的 ， 所 以 将 其 假定 为 window 的 一 
个 属性 。 

把 项 层 作 用 域 认 为 是 wingdow 作用 域 , 这 可 能 不 会 让 我 们 陷 和 人 概念 上 的 烦恼 ， 因 为 任何 位 于 
顶层 的 未 限定 的 引用 都 被 假定 为 winqow 的 属性 。 当 深入 研究 困 数 主体 时 ， 作 用 域 规 则 会 变 得 更 
加 复杂 (事实 上 会 极其 复杂 )， 不 过 我 们 很 快 就 会 解决 这 个 问题 。 

以 上 涵盖 了 JavaScript object 绿 述 的 大 部 分 内 容 。 从 上 述 讨论 中 总 结 出 来 的 重要 概念 有 : 

口 JavaScript 对 象 是 属性 的 无 序 集合 ; 

口 属性 由 名 称 和 值 组 成 ; 

口 可 以 使 用 字面 值 来 声明 对 象 ; 

口 顶层 变量 是 wingow 的 属性 。 

现在 来 讨论 一 下 ， 当 我 们 谈 到 JavaScript 函数 是 一 等 对 象 时 ， 意 味 着 什么 ? 


A.2 作为 一 等 公民 的 函数 


在 许多 传统 的 OO 语言 中 ， 对 象 可 以 包含 数据 ， 还 可 以 拥有 方法 。 在 这 些 声言 中 ， 数 据 和 方 
法 通常 是 不 同 的 概念 ， 而 JavaScript 却 走 了 一 条 不 同 的 道路 。 

JavaScript 中 的 函数 也 被 认为 是 对 和 象 , 与 定义 在 JavaScript 中 任何 其 他 的 对 象 类 型 一 样 ， 比 如 
String、Number 或 Date。 和 其 他 对 和 旬 一 样 ， 晒 数 也 是 通过 JavaScript 构造 硕 来 定义 的 〈 在 这 种 
情况 下 是 Function )， 可 以 对 函数 进行 如 下 操作 : 

口 把 也 数 赋值 给 变量 ; 


























中 这 两 处 引用 是 ride .owner 提 到 的 电影 《 赏 金 猎人》 中 的 台词 。 
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口 将 函数 指定 为 一 个 对 象 的 属性 ; 

口 把 也 数 作为 参数 传递 ; 

口 把 函数 作为 函数 结果 返回 ; 

口 使 用 字面 值 来 创建 吨 数 。 

为 在 JavaScript 语言 中 对 待 另 数 的 方式 与 对 竺 其 他 对 象 的 方式 相同 ， 所 以 我 们 说 果 数 是 一 
等 对 象 。 

但 是 你 可 能 心里 会 想 ， 函 数 与 其 他 对 象 类 型 (例如 string 或 Number ) 从 根本 上 是 不 同 ， 
因为 国 数 不 仅 拥有 值 (在 Function 实例 中 ， 值 是 吨 数 体 )， 而 且 还 拥有 名 称 。 

恩 ， 还 早 着 呢 ! ” 


A.2.1 名 称 中 包含 了 什么 


大 部 分 JavaScript 程序 员 都 有 一 种 错误 的 假设 ， 认 为 函数 是 已 命名 的 实体 。 事 实 并 非 如 此 ， 
如 果 你 就 是 这 种 程序 员 ， 那 么 你 已 经 被 绝地 武士 的 探 心术" 愚弄 了 。 与 对 象 的 其 他 实例 (例如 
String、Date 或 Number ) 一 样 ， 只 有 在 把 函数 赋值 给 变量 、 属 性 或 参数 的 时 候 ， 柄 数 才能 被 
引用 。 

下 面 思考 类 型 为 Number 的 对 象 。 我 们 经 稍 通 过 字面 信 表 示 法 来 表示 Number 实例 ， 例 如 下 
面 的 语句 
213; 
是 完全 有 效 的 ,但 是 它 也 是 完全 无 用 的 。Number 实例 用 处 不 大 ， 除 非 将 其 赋值 给 属性 或 对 
或 者 将 其 绑 定 到 参数 名 称 上 。 和 否则 ， 我 们 无 法 引用 散落 在 内 存 中 的 实例 。 
同样 的 规则 也 适用 于 Function 对 和 象 的 实例 。 
“但 ,但 是 ……” 你 可 能 会 说 ,“ 那 下 面 的 代码 呢 ?”” 
function doSomethingWonderful() { 


alert('does something wonderful').; 


1 

“ 那 不 是 创建 了 名 为 aosomethingwonqerful 的 图 数 吗 ? ” 

不 , 不 是 的 。 尽 管 这 种 表示 法 可 能 看 起 来 很 熟悉 ， 而 且 被 广泛 用 来 创建 顶层 羡 数 , 但 它 与 通过 
var 来 创建 window 属性 使 用 的 是 相同 的 语法 。function 关键 字 自 动 创建 一 个 Function 实例 并 
将 其 赋值 给 使 用 吨 数 “和 名称” 创建 的 windovw 属性 (前面 称 其 为 绝地 武士 的 挖 心术 )， 如 下 所 示 : 


doSomethingWonderful = function() f{ 
alert('does something wonderful').; 


} 
如 有 果 这 看 起 来 有 点 奇怪 ,考虑 为 一 个 使 用 完全 相同 形式 的 语句 ,但 这 次 使 用 Number 的 字面 值 : 


aWonderfulNumber = 213;， 









































> 














中 也 就 是 说 上 面 对 函 数 名 称 和 值 的 理解 不 完全 正确 ， 还 有 很 多 知识 需要 学 习 。 
Q Jedi mind trick 是 《星球 大 战 》 里 绝地 武士 的 一 个 招式 ， 用 于 控制 对 方 的 思维 。 
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这 个 语句 不 足 为 不 奇 ， 它 与 把 函数 赋值 给 顶层 变量 (window 属性 ) 的 语句 如 出 一 办 : 使 用 
为 数字 面值 来 创建 Function 实例 ， 然 后 将 函数 赋值 给 变量 dosomethingWonderful， 与 使 用 
Number 字面 量 123 将 Number 实例 赋值 给 变量 aWonderfulNumber 的 方式 完全 相同 。 

如 采 你 从 来 没有 看 到 过 函数 字面 值 的 语法 ,可 能 会 觉得 它 有 点 奇怪 。 它 是 由 关键 字 function 
与 紧 接 着 的 被 圆 括 号 所 包含 的 参数 列表 ， 以 及 随后 的 函数 主体 所 组 成 的 。 

如 果 我 们 声明 顶层 的 已 命名 孔 数 时 ， 就 会 同时 创建 一 个 Function 实例 ， 并 将 其 赋值 给 
window 的 一 个 属性 ， 该 属性 使 用 所 谓 的 函数 名 称 目 动 创建 。Function 实例 不 再 拥有 名 称 ， 只 
是 拥有 Number 字面 值 或 string 字面 值 。 图 A-2 说 明了 这 个 概念 。 














MW/ late eM 


aWonderfulNumber 
doSomethingWonderful : 













图 A-2 Function 实例 是 无 名 称 的 对 象 ， 就 像 Number 213 或 任何 其 他 的 
JavaScript 值 一 样 。 只 能 通过 生成 引用 来 对 其 进行 命名 


记 住 , 在 HIML 页 面 中 创建 了 顶层 变量 时 , 会 将 变量 创建 为 window 实例 的 属性 。 因 此 ， 下 














、 pa 
面 的 语句 都 是 等 价 的 : 

function hello(){ alert('Hi there!'); } 

hello = function(){ alert('Hi there!'); } 

window.hello = function(){ alert('Hi there!'); } 


尽管 这 看 起 来 很 像 语法 “魔术 ”， 但 是 理解 这 一 点 很 重要 : 和 其 他 对 象 类 型 的 实例 一 样 ， 
Function 实例 可 以 赋值 给 变量 、 属 性 或 参数 的 值 。 并 且 就 像 其 他 的 那些 对 象 类 型 ， 无 名 称 无 实 
体 的 实例 训 无 用 处 ， 只 有 将 它们 赋值 给 变量 、 属 性 或 参数 ， 这 样 才 能 引用 它们 。 








Gecko 浏览 器 和 函数 名 称 

基于 Gecko 布局 引擎 的 浏览 器 ( 如 Firefox 以 及 Camino )， 把 使 用 顶层 语法 定义 的 函数 名 
称 存 储 在 函数 实例 中 名 为 name 的 非 标准 属性 中 。 尽 管 对 于 一 般 的 公共 开发 而 言 这 可 能 没有 什 
么 用 处 (尤其 是 考虑 到 它 受 限于 基于 Gecko 的 浏览 器 )， 但 是 对 于 浏览 器 插件 和 调试 器 的 开发 
者 来 说 这 是 非常 有 价值 的 。 


我 们 已 经 看 到 了 将 函数 赋值 给 变量 、 属 性 的 示例 , 将 它 作为 参数 传递 会 是 什么 情况 呢 。 下 面 
来 看 看 这 么 做 的 原因 和 方式 。 


A.2.2 ”作为 回调 的 函数 
当 我 们 的 代码 遵循 井然 有 序 的 同步 流 时 ， 顶 层 函 数 当 然 不 错 ， 但 是 HTML 页 面 的 本 质 是 ， 
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一 旦 加 载 之 后 就 完全 不 是 同步 的 。 无 论 我 们 是 在 处 理事 件 、 创 建 计时 器 ， 还 是 发 起 Ajax 请 求 ， 
Web 页 面 代码 的 本 质 是 异步 的 。 在 异步 编程 中 最 流行 的 概念 是 回调 函数 。 

以 计时 需 为 例 ， 可 以 通过 加 window. setTimeout () 方 法 传递 合适 的 持续 时 间 值 来 触发 计时 
器 (假设 $ 秒 之 后 触发 计时 需 )。 但 是 这 个 方法 如 何 才 能 让 我 们 知道 计时 器 什么 时 候 过 期 ， 让 我 
们 不 用 空 等 而 做 其 他 事情 ? 这 个 方法 通过 调用 由 我 们 提供 的 函数 来 完成 这 一 任务 。 

思考 下 面 的 代码 : 


function hello() { alert('Hi there!'); } 














setTimeout (hello, 5000); 

我 们 声明 了 一 个 hello 函数 并 设置 在 5 秒 钟 (第 二 个 参数 表示 5000 毫秒 ) 之 后 触发 计时 需 。 
我 们 问 setTimeout () 方 法 传递 的 第 一 个 参数 是 一 个 孔 数 的 引用 。 传递 函数 作为 参数 与 传递 任何 
其 他 值 没有 什么 不 同一 一 就 像 传递 Number 作为 第 二 个 参数 那样 。 

当 计 时 右 过 期 时 , hello 国 数 会 被 调用 。 因 为 在 代 但 中 setTimeout () 方 法 回调 了 一 个 水 数 ， 
所 以 该 函数 被 称 为 回调 也 数 。 

大 部 分 高 级 JavaScript 程序 员 可 能 会 觉得 这 段 代码 示例 很 幼稚 , 因为 没有 必要 创建 hello 名 
称 。 除非 要 在 页 面 的 其 他 地 方 调用 此 函数 , 否则 没有 必要 创建 window 的 属性 hello 来 暂时 存储 
Function 实例 ， 以 便 将 hello 作为 回调 参数 来 传递 。 

编写 这 个 片段 更 简洁 的 方式 是 : 

setTimeout (function() { alert('Hi there!'); },5000); 

这 个 代码 在 参数 列表 中 直接 使 用 函数 字面 值 ， 没 有 生成 不 必要 的 名 称 。 这 是 我 们 在 jQuery 
代码 中 经 常 看 到 的 习惯 用 法 〈 当 不 必 把 函数 实例 赋值 给 顶层 属性 时 )。 

目前 为 止 ， 示 例 中 所 创建 的 果 数 要 么 是 顶层 男 数 (也 就 是 顶层 的 wingdow 属性 )， 要 么 是 在 
函数 调用 中 被 赋值 给 参数 ,我们 也 可 以 将 Function 实例 赋值 给 对 象 的 属性 ， 此 时 事情 才 真 正 变 
得 有 趣 起 来 。 继 续 阅 读 吧 ……… 


























A.2.3 ” this 到 底 是 什么 


OO 语言 目 动 提供 了 从 方法 中 引用 对 象 当 前 实例 的 办 法 。 在 Java 和 C++ 这 样 的 语言 中 ,this 
参数 指 癌 当前 实例 。 在 JavaScript 中 ， 也 存在 个 类 似 的 概念 ， 甚 至 还 使 用 了 相同 的 this 关键 词 ， 
同样 也 提供 方法 来 访问 与 图 数 相关 联 的 对 象 。 但 是 OO 程序 员 要 注意 ! JavaScript 实现 中 的 this 
和 其 他 OO 语言 中 的 this 存在 微妙 的 差异 ， 这 种 差异 体现 在 几 个 重要 的 方面 。 

在 基于 类 的 00 语言 中 ，this 指针 通常 引用 类 的 实例 (方法 在 此 类 中 声明 )。 在 JavaScript 
中 国 数 是 一 等 对 象 ， 它 们 不 被 声明 为 任何 东西 的 一 部 分 ， 而 this 所 引用 的 对 象 〈 称 为 函数 上 下 
文 ) 并 不 是 由 声明 琢 数 的 方式 决定 的 ， 而 是 由 调用 羡 数 的 方式 决定 的 。 

这 意味 着 ,同样 的 油 数 可 以 有 不 同 的 上 下 文 ， 取决 于 调用 孔 数 的 方式 。 初 看 起 来 这 可 能 有 点 
奇怪 ,但 是 它 相 当 有 用 。 

在 默认 情况 下 ， 也 数 调用 的 上 下 文 ( this ) 是 对 象 ， 其 属性 包含 用 于 调用 该 函数 的 引用 。 
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作为 演示 ， 回 顾 一 下 译 托 车 示例 ， 按 如 下 所 示 修 改 对 象 的 创建 过 程 (添加 的 内 容 以 粗 体 突出 
显示 小 


var ride = { 
make: 'Yamaha', 
model: 'V-Star Silverado 1100 ' ， 
year: 2005, 
Purchased: new Date(2005,3,12), 


owner: {name: 'Spike Spiegel',occupation: 'bounty hunter'}, 
whatAmI: function() { 
return this.year+' '+this.make+' '+this.model; 


} 
}; 


我 们 加 原始 示例 代码 添加 了 引用 FUNCt1ion 实例 的 、 名 为 whatAmI 的 属性 。 新 的 对 象 层次 
结构 (其 中 Function 实例 被 赋值 给 名 为 whatamI 的 属性 ) 如 图 A-3 所 示 。 










Object “String 
Number 
Date 







Silllae Ml V-Star Silverado 1100 





















Object 


occupation 


String 








milelolloln ml() { 
return this.year+' '+this.make+' '+this.model; 


图 A-3 ”这 个 模型 清楚 地 显示 了 函数 不 是 object 对 象 的 一 部 分 ， 而 只 是 被 名 为 
whatAmI 的 Object 属性 所 引用 


当 通 过 属性 引用 来 调用 函数 时 ， 束 像 这 样 ， 

Var bike = ride.whatAmI ().; 

也 数 上 下 文 (this 引用 ) 被 设置 为 ride 所 指 回 的 对 象 实例 。 作 为 结 采 ， 变 量 bike 被 设置 
为 字符 串 2005 Yamaha V-Star Silverado 1100, 因为 该 函数 是 通过 this 调用 从 而 获取 对 和 象 
属性 的 。 

对 于 顶层 函数 来 说 也 是 一 样 。 请 记 住 : 顶层 函数 是 window 的 属性 ， 因 此 当 将 其 作为 顶层 天 
数 来 调用 时 ， 其 函数 上 下 文 就 是 window 对 和 象 。 

尽管 这 可 能 是 第 见 的 隐 式 行为 ,但 是 JavaScript 提供 的 办 法 可 以 显 式 地 控制 函数 上 下 文 所 要 
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使 用 的 内 容 。 通 过 Function 的 方法 call () 或 apply() 来 调用 病 数 ， 就 可 以 将 困 数 上 下 文 设 置 
为 任何 想 要 的 内 容 。 

是 的 ， 作 为 一 等 对 象 ， 图 数 甚 至 拥有 由 Function 构造 希 定 义 的 那些 方法 。 

使 用 cal1 () 方 法 来 调用 水 数 ， 指 定 第 一 个 参数 作为 函数 上 下 文 的 对 象 ， 而 其 余 参 数 成 为 被 
调用 函数 的 参数 。 也 就 是 说 ，call () 的 第 二 个 参数 成 为 了 被 调用 聘 数 的 第 一 个 参数 ， 依 此 类 推 。 
apply () 方 法 的 工作 方式 与 此 类 似 , 不 同 的 是 ， 它 的 第 二 个 参数 应 该 成 为 被 调用 函数 参数 的 对 象 
数组 。 

惑 了 ? 该 是 介绍 一 个 综合 示例 的 时 候 了 。 思 考 代 码 清单 A-1 中 的 代码 ( 可 以 从 本 书 源 代 人 码 
appendix/function.context.html 中 找到 )。 


代码 清单 A-1 函数 上 下 文 的 值 取决 于 调用 琢 数 的 方式 





<html> 
<head> 
<title>Function Context Example</title> 
<script> 
Var ol = {handle:'ol1l'}; 
Var 0o2 = {handle:'o2'}; 
Var 03 = {handle:'o3'}; 
window.handle = 'window'; 
function whoAmI() { 
return this.handle; © 
} 
ol.identifyMe = whoAmI:; -—© 
alert (whoAmI ()); < 个 
alLerttol iaenEityet 7 < 个 
alert (whoAmI .call (02)); <- 个 
alert(whoamI.apply(o3) ) ; -—©@ 
</script> 
</head> 
<body> 
</body> 
</html> 


在 这 个 示例 中 ， 我 们 定义 了 3 个 人 简单 的 对 象 ， 每 个 对 象 剖 有 handle 属性 ， 以 便 在 给 定 
引用 的 时 候 能 够 轻松 地 识别 对 象 佑 。 我 们 也 疝 window 实例 添加 了 handle 属性 以 便 易于 
标识 。 

然后 定义 了 顶层 函数 ， 无论 什 么 对 象 作为 其 函数 上 下 文 ， 它 都 会 返回 handle 属性 值 @, 将 
相同 的 函数 实例 赋值 给 对 象 ol 的 idaentifyMe 属性 个。 可 以 这 样 认为 ， 这 在 ol 上 创建 了 一 个 
identifyMe 方法 ， 注 意 到 这 一 点 很 重要 : 函数 的 声明 是 独立 于 对 象 ol 之 外 的 。 

最 后 ,我 们 弹出 4 个 警告 框 ， 每 个 警告 框 都 使 用 不 同 的 机 制 来 调用 相同 的 冰 数 实例 。 在 浏览 
价 中 加 载 这 个 示例 时 ， 这 4 个 警告 框 依 次 显示 在 图 A-4 中 。 
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http:/ /localhost 


window 




















FN http:/ /localhost 
http:/ /localhost 
D2 





图 A-4 ”作为 函数 上 下 文 的 对 象 随 着 调用 函数 方式 的 不 同 而 改变 


这 个 警告 框 序列 说 明了 以 下 几 个 问题 。 

口 当 直接 把 冰 数 作为 顶层 困 数 来 调用 时 ， 郴 数 上 下 文 是 windovw 实例 @。 

口 当 把 也 数 作为 对 和 象 【〔 在 这 种 情况 下 是 ol ) 的 属性 来 调用 时 ， 该 对 象 就 成 为 函数 调用 的 也 
数 上 上 下文, 可 以 说 函数 充当 了 该 对 象 的 方法 一 一 就 像 在 OO 语言 中 那样 。 但 是 注意 不 要 
为 这 个 类 比 上 暗自 高 兴 。 如 采 你 不 够 仔细 的 话 就 很 可 能 会 误 入 疏 途 ， 就 像 这 个 示例 的 其 余 
部 分 显示 的 那样 。 

口 使 用 Function 的 call() 方 法 将 把 也 数 上 下 文 设置 为 传人 call () 的 第 一 个 参数 的 任何 
对 象 一 一 在 这 种 情况 下 是 o2@。 在 这 个 示例 中 ， 涵 数 表 现 得 像 是 o2 的 方法 ， 尽 管 它 和 
o2 之 间 没 有 任何 联系 ， 甚 至 连 o2 的 属性 都 不 是 。 

口 就 像 使 用 cal1 0) 那样 , 可 以 使 用 Function 的 apply () 方 法 将 函数 上 下 文 设置 为 作为 第 
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一 个 参数 传递 的 任何 对 象 @@。 只 有 在 把 参数 传人 函数 的 时 候 (为 了 清晰 起 见 ， 在 本 示例 
中 没有 进行 这 个 操作 )，call () 和 apply () 这 两 个 方法 的 差 寞 才 变 得 明显 起 来 。 
这 个 示例 页 面 清楚 地 演示 了 : 函数 上 下 文 是 基于 每 个 调用 来 决定 的 , 可 以 使 用 任何 对 象 作为 
咕 数 上 下 文 来 调用 单个 水 数 。 因 此 ,“ 哨 数 是 对 和 象 的 方法 ”这 个 说 法 绝对 是 不 正确 的 。 下 面 的 表 
述 准确 多 了 : 








当 对 象 o 充当 函数 于 的 调用 函数 上 下 文 时 ， 函 数 下 就 充当 了 对 象 o 的 方法 。 


为 了 更 进一步 说 明 这 个 概念 ， 考 虑 给 示例 添加 如 下 语句 所 市 来 的 效 来 : 

alert(ol.identifyMe.call(o3)).; 

尽管 我 们 将 函数 作为 o1 的 属性 来 引用 ,但 是 这 个 调用 的 函数 上 下 文 是 o3 , 这 进一步 强调 了 : 
中 数 上 下 文 取决 于 调用 也 数 的 方式 ， 而 不 是 声明 函数 的 方式 。 

当 使 用 带 有 回调 函数 的 jQuery 命令 和 函数 时 ， 这 将 会 被 证 明 是 一 个 重要 概念 。 我 们 在 2.3.3 
广 中 束 看 到 过 这 个 概念 的 实际 操作 ( 即使 你 当时 没有 意识 到 这 个 概念 )， 在 那里 我 们 给 $ 的 
filter() 方 法 提供 了 一 个 回调 函数 ， 把 包 涂 集中 的 每 个 元 素 作 为 其 函数 上 下 文 来 依次 顺序 地 调 
用 咀 数 。 

既然 已 经 理解 了 也 数 如 何 充当 对 和 象 的 方法 ， 下 面 就 来 把 注意 力 转 移 到 为 一 个 局 级 的 函数 话 
局 ， 在 有 效 利用 jQuery 方面 ， 它 将 扮演 一 个 重要 角色 一 一 闭 包 。 


























A.2.4 闭 包 


对 于 拥有 传统 的 OO 语言 或 者 过 程式 编程 背景 的 页 面 开发 者 来 说 , 闭 包 是 个 理解 起 来 弟 肖 有 
点 琳 怪 的 概念 。 然 而 ,对 于 拥有 蕊 数 编 程 背 景 的 程序 员 来 说 ,， 团 包 是 个 熟悉 和 民 世 的 概念 。 先 来 
回答 初学 者 的 问题 : 什么 是 财 包 ? 

人 简单 地 表述 如 下 : 闭 包 就 是 Funcet1ion 实例 ， 它 结合 了 来 日 环境 的 ( 国 数 执行 所 必需 的 ) 局 
部 变量 。 

在 声明 函数 时 ,可 以 在 声明 函数 时 引用 函数 作用 域内 任何 变量 。 对 于 任何 技术 背景 的 任何 开 
发 者 来 说 ,这 是 预料 之 中 理所当然 的 事情 。 但 是 使 用 闭 包 时 ， 即 使 在 也 数 声 明之 后 , 已 经 超出 也 
数 作 用 域 ( 也 就 是 关闭 了 也 数 声明 ) 的 情况 下 ， 该 函数 仍然 汗 有 这 些 变 量 。 

对 于 编写 有 效 的 JavaScript 来 说 ， 在 回调 晒 数 运行 时 ， 引 用 声明 回调 咕 数 时 的 局 部 变量 是 一 
个 不 可 或 缺 的 工具 。 再 次 使 用 计时 融 , 来 看 一 下 代码 清单 A-2 中 用 于 演示 的 示例 ( 文件 appendixA/ 


closure.html )。 


代码 清单 A-2 闭 包 允许 访问 函数 声明 的 作用 域 
<html> 
<head> 
<title>Closure Example</title> 
<script type="text/javascript" 
src="../scripts/jJquery-1.2.js"></script> 
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<script> 
Ss(function()t 


var local = 1; -—©@ 


window.setIinterval (function()t -© 
$s ('#display') 
.append('<div>At '+new Date()+' local='+local+'</div>').;， 


J]ocal+t++; 
},3000); 6 
jo 
</script> 
</head> 
<body> 
<div id="display"></div> -—©@ 
</body> 
</html> 


在 这 个 示例 中 ， 我 们 定义 了 在 DOM 加 载 后 触发 的 就 绪 处 理 关 。 在 这 个 处 理 硕 中 声明 了 一 
个 名 为 local 的 局 部 变量 人 @， 把 数字 值 1 赋值 给 它 。 然 后 使 用 windqow.setIinterval () 方 法 
创建 了 一 个 每 隔 3 秒 就 触发 的 计时 需 候 。 我 们 指定 了 内 联 函 数 作 为 计时 需 的 回调 函数 ， 它 引用 
local 变量 , 会 显示 当前 时 间 以 及 local 的 值 (通过 把 <aiv> 元 素 写 人 到 在 页 面 主 体内 定义 的 、 
名 为 display 的 元 素 中 来 显示 结果 人 @ ), 作 为 回调 函数 的 一 部 分 ,local 变量 的 值 也 被 增加 了 全。 

在 运行 这 个 示例 之 前 ， 如 有 果 我 们 不 熟悉 闭 包 ， 可 能 会 去 查看 这 段 代 人 码 ， 从 而 发 现 一 些 问题 。 
我 们 可 能 会 猜测 ， 因 为 回调 会 在 页 面 加 载 后 3 秒 触 发 (在 就 绪 处 理 需 执行 完毕 很 久 以 后 )， 所 以 
local 的 值 在 回调 函数 的 执行 期 间 是 未 定义 的 。 毕 苋 , local 声明 所 在 的 块 在 加 绪 处 理 需 执行 完 
毕 时 超出 了 作用 域 ， 对 吧 ? 

在 页 面 加 载 之 后 并 让 其 运行 一 小 段 时 间 ， 就 可 以 看 到 如 图 4-5 所 示 的 画面 。 


AMA 














| jQuery in Action, 2nd Editior x | Closure Example K Ws 


和， 加 会 v3 http 11localhost/jaqia2z/appendix/closure.htmml Ea 口 > AA- 


At Thu May 06 2010 19:00:57 GMT-0500 (CDT) local=1 
At Thu May 06 2010 19:01:00 GMT-0500 (CDT) local=2 
AtThu May 06 2010 19:01:03 GMT-0500 (CDT) local=3 
AtThu May 06 2010 19:01:06 GMT-0500 (CDT) local=4 
At Thu May 06 2010 19:01:09 GMT-0500 (CDT) local=5 
At Thu May 06 2010 19:01:12 GMT-0300 (CDT) local=6 
At Thu May 06 2010 19:01:15 GMT-0500 (CDT) local=7 
Ar Thu May 06 2010 19:01:18 GMT-03500 (CDT) local=8 
Ar Thu May 06 2010 19:01:21 GMT-0300 (CDT) local=9 





图 A-5 闭 包 人 允许 回调 访问 环境 中 的 值 ， 即 使 该 环境 已 经 超出 了 作用 域 





它 可 以 正常 运行 ! 但 它 是 如 何 运 行 的 呢 ? 
当 就 绪 处 理 器 执行 完毕 时 ，1local 声明 所 在 的 块 超出 了 作用 域 (这 昌 然 是 正确 的 )， 但 是 函 
数 声 明 所 创建 的 闭 包 (包括 local 变量 ) 在 函数 的 生命 周期 内 都 保持 在 作用 域 中 。 
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注意 UUUOOUODOO0ODO00 Javascript000000000000000000000000 
UDODUOU0OUUUOODUOODUO0UUUUUUUU0UUUUUUUUNUUUUD 
DUDOUD0O0000O00ODUUUU0U0UU0UUUUUUU 0 
DDDODUOU0O0U0UUOOODUOODUO0UUUUUUUUUUUUUUUUD 
UUDOUD0O00O0OO0UUUUUUUUUUUU DOMUUUUUOUUUUUUUUUD 





闭 包 的 为 一 个 重要 特征 是 : 冰 数 上 下 文 绝 不 会 被 包含 为 财 包 的 一 部 分 。 人 例如， 下面 代码 不 会 
按照 我 们 期 望 的 方式 来 执行 : 

this ia = ' SomeID ':; 

S$S('*').each(function()t 


alert (this.id): 
}); 


记 住 ， 每 个 函数 调用 都 有 其 函数 上 下 文 ， 因 此 在 上 述 代码 中 ,传递 给 each() 的 函数 上 下 文 
在 回调 函数 内 是 来 日 于 jQuery 包 淡 集 的 元 系 ， 而 不 是 被 设置 为 'someID' 的 外 部 也 数 属性 。 对 回 
调 函 数 的 每 个 调用 都 会 依次 弹出 警告 枉 ， 用 来 显示 包 效 集中 各 个 元 素 的 idq。 

如 果 知 要 访问 在 外 部 函数 中 作为 函数 上 下 文 的 对 象 , 可 以 采用 通常 的 习惯 用 法 : 在 局 部 变量 
中 创建 this 引用 的 副本 ， 这 个 副本 将 会 被 包含 在 闭 包 中 。 考 虑 对 示例 做 如 下 改变 : 




















this.id = 'someID': 
Var outer = this; 
S('*').each(function()t 


alert (outer.1d).; 


}); 

局 部 变量 outer 被 赋值 为 外 部 也 数 的 函数 上 下 文 的 引用 ， 从 而 成 为 团 包 的 一 部 分 ， 可 以 在 
回调 函数 中 访问 此 变量 。 改 变 后 的 代码 现在 会 弹出 显示 字符 串 'someID ' 的 警告 枉 ， 包 交集 中 有 
多 少 个 元 系 就 弹出 多 少 次 。 

当 使 用 jQuery 命令 (这些 命 令 利用 异步 的 回调 函数 ) 来 创建 优雅 的 代码 时 ， 我 们 将 会 发 现 
财 包 是 必 不 可 少 的 ， 尤 其 是 在 Ajax 请 求 和 事件 处 理 领域 。 














A.3 小 结 


JavaScript 是 在 Web 上 被 广泛 使 用 的 语言 ， 但 是 许多 编写 JavaScript 的 页 面 开发 者 常 弟 没有 
深入 地 使 用 它 。 在 本 附录 中 ,我 们 介绍 了 这 门 语言 的 一 些 较 为 深入 的 方面 , 要 想 在 页 面 上 高 效 地 
使 用 jQuery 就 必须 了 解 这 些 内 容 。 

我 们 看 到 了 JavaScript 的 object 主要 是 作为 其 他 对 象 的 容 融 而 存在 。 如 果 你 拥有 OO 语言 
背景 ,那么 把 object 实例 看 成 一 个 “名 称 / 值 ”对 的 无 序 集合 , 这 可 能 与 你 之 前 所 认为 的 对 象 大 
不 相同 。 但 即使 是 在 编写 不 太 复 杂 的 JavaScript 时 ， 这 也 是 一 个 需要 掌握 的 重要 概念 。 

咀 数 在 JavaScript 中 是 一 等 公民 ， 能 够 以 类 似 于 其 他 对 象 类 型 的 方式 来 进行 声明 和 引用 。 可 
以 使 用 字面 值 表示 法 来 声明 滑 数 , 将 它们 保存 在 变量 和 对 象 属性 中 , 甚至 还 可 以 将 它们 作为 回调 
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为 数 ， 将 它们 作为 参数 来 传人 其 他 顶 数 。 

函数 上 下 文 这 个 术语 摘 述 的 是 在 负数 调用 中 this 指针 所 引用 的 对 象 。 尺 管 通过 将 对 和 象 设置 
为 函数 上 下 文 , 就 可 以 像 操 作对 象 方法 那样 来 操作 函数 , 但 是 孔 数 并 没有 被 声明 为 任何 单个 对 和 象 
的 方法 。 调 用 方式 ( 可 由 调用 者 显 式 地 控制 ) 决定 了 调用 的 函数 上 下 文 。 

最 后 ,我们 看 到 了 郴 数 声明 及 其 环境 形成 闭 包 的 方式 。 在 后 续 调 用 曙 数 时 ， 这 个 财 包 人 允许 上 
数 访问 成 为 团 包 一 部 分 的 局 部 变量 。 

牢 牢 地 掌握 这 些 概 念 ， 我 们 已 经 准备 好 去 面 对 挑战 ， 直 面 在 页 面 上 使 用 jQuery 来 编写 高 效 
的 JavaScript 时 会 遇 到 的 挑战 。 
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“这 本 书 带 我 走 进 了 jQuery 的 神 育 世界 ， 让 我 见识 到 jQuery 的 优雅 、 简 洁 。 我 非常 享受 这 段 学 习 过 程 。” 


Jan Van Ryswyck, elegantcode.com 


“ 随 着 你 在 日 常 开发 中 对 jQuery 的 了 解 越 来 越 多 ， 此 书 也 可 以 作为 很 好 的 参考 手册 。” 
一 一 David Hayden， 微软 MVP C#，Codebetter.com 





JQuery In Action Second Edition 


人 天 战 (第 2 版 ) 





jQuery 是 目前 应 用 最 广 的 优秀 开源 JavaScriptAjax 框 架 之 一 ， 已 经 成 为 微软 ASP.NET、Visual Studio 和 诺 基 
亚 Web Run Time 等 主流 开发 平台 的 组 成 部 分 。 借 助 jQuery 的 魔力 ， 数 十 行 JavaScript 代 码 可 以 神奇 地 压缩 成 区 区 
几 行 ， 这 让 Web 开 发 人 员 一 瞬间 就 深 深 地 迷恋 上 这 个 方便 快捷 、 功 能 完备 的 利器 。 

本 书 是 带领 你 自如 驾驭 jQuery 的 导航 者 ， 蔡 你 肃清 学 习 和 开发 路 上 的 各 种 障碍 。 在 这 里 ， 你 不 仅 能 深入 学 习 
A 还 能 领略 到 它 的 内 部 工作 机 制 、 插 件 体 系 结构 和 背后 的 各 种 策略 和 理论 ， 学 会 怎样 与 
其 他 工具 和 框架 交互 。 这 一 版 基于 jQuery1.4 讨 论 了 新 版 本 所 增加 和 修改 的 特性 ， 并 增加 了 3 章 的 篇 幅 来 介绍 
jQuery Ul。 

有 了 jQuery 和 这 本 书 ， 你 不 需要 再 费心 劳力 地 纠缠 于 各 种 高 深 复杂 的 JavaScript 技 巧 ， 只 使 用 CSS、XHTML 
以 及 普通 的 JavaScript 知 识 ， 就 能 直接 操作 页 面 元 素 ， 实 现 更 快速 更 高 效 的 Web 开 发 。 





畅销 书 升 级 版 ， 涵 盖 jQuery1.4 和 jQuery U1 1.8 
国 jQuery 开发 团队 核心 成 员 倾 力 打造 
图 掌握 Web 开发 利器 的 必修 宝典 
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最 前 疝 的 T 类 电子 书 发 售 平台 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 犹 
豫 丛 得 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 
出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 
上 厂商， 图 灵 社 区 目前 为 读者 提供 两 种 DRM-free 的 阅读 
体验 : 在 线 阅 读 和 PDF。 























相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 它 不 仅 发 
布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 乒 〈 即 使 
有 的 书 纸 质 版 是 墨 日 印刷 的 ) 。 读 者 偿 可 以 方便 地 进 
行 搜 索 、 剪 贴 、 复 制 和 打印 。 


最 方便 的 开放 出 版 平台 


图 灵 社 区 癌 读 者 开放 在 线 写 作 功 能 ， 协 助 你 实现 目 出 
版 和 开源 出 版 的 梦想 。 利 用 “合集 ”功能 ， 你 就 能 联 
合 二 三 好 友 共 同 创 作 一 部 技术 参考 书 ， 以 免费 或 收费 
的 形式 提供 给 读者 。 (收费 形式 须 经 过 图 灵 社 区 立项 
评审 。) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 
的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 








图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 
社区 公布 。 如 采 你 有 意 翻 译 哪 本 图 书 ， 欢 迎 你 来 社区 
申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 
译 首 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 
需要 有 坚强 的 妆 力 的 。 


欢迎 加 入 


公有 灵 社 区 


图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 
崇 密 结合 ， 目 前 已 实现 作 译 痢 网 上 交 稿 、 编 辑 网 上 
审 稳 、 按 革 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 谈 者 以 较 
快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 
往 翻 译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 
捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 
提前 消灭 书稿 中 的 销 误 ， 最 大 程度 地 保证 图 书 出 版 


的 质量 。 

















最 直接 的 读者 交流 平台 


在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 
误 、 发 表 评 论 ， 以 各 种 方式 写作 译 者 、 编 辑 人 员 和 
其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 医 赠 社区 
银子 。 





你 可 以 积极 参与 社区 经 毕 开 展 的 访谈 、 审 恋 、 评 选 
等 多 种 活动 ， 最 取 积 分 和 银子 ， 积 累 个 人 声望 。 


Ituring.com.cn 
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